How to get HTML from Remirror editor in Reactjs

How to get HTML from proseMirror editor using Remirror in Reactjs


We have learned how to setup basic proseMirror editor in React using remirror toolkit. How to access the state as HTML ?

Remirror allow us to use a onChangeHTML component and then we have to define handler for accessing a state.

First import the component remirror react.

import { OnChangeHTML } from "@remirror/react"; 

Secondly include the component in Remirror editor as follows

const RichTextEditor = () => {
  return (
    <div>
      <WysiwygEditor placeholder="I am a text">
        <OnChangeHTML onChange={handleChange} />
      </WysiwygEditor>
    </div>
  );
};

Let’s define the handleChange and access the state. For simplicity we output the HTML to console.

const handleChange = (data) => {
  console.log(JSON.stringify(data));
};

That’s all , 😊.

Open the code in Sandbox

Single Page app, what it really means ?

What is SPA and what does meant ti you.


From time to time we have been hearing this single page notion. Is it mean you can have only single html page ? Why should I creating a single page app ? Waste of time ?

Single Page App

With the emergence of front end frameworks such as React, Angular and Vue the notion SPA in use. As the name indicate it works as single page, but in reality, it can be works as other web pages does.

One word about front end library, the function of a front-end library is to display content from server, in other words they works in client side, but there are few exceptions.

SPA that work as Multiple page

Generally a web app/ website consisting of multiple page could have , a home , product, contact, about pages. A web app using Vue/React by default can have a single page, index page.

How how can I add more pages ? Here the router come into light. Router are links to components. We can create web page as component and place them into our index.html file.

When the user click the router link, it switches the component and hence work like other websites, make sense ?

Wanna start learning Vue/React ?

What should I know , this will be the first question and what type of computer should I have ?

  • HTML,CSS
  • JAVASCRIPT
  • A average laptop/desktop
  • Internet Connection
  • VS Code for debugging and editing.

Following Vue posts may help you get started

How to access HTML elements in Vuejs app

How to access DOM in Vuejs app


Accessing web element like title, background can be useful for developing an interactive UI for your web app.

We are discussing the non ref method here.

How ?

In this example we are planning to access the current elements, which can be a div tag. So that we can access to all the properties.

How to do ?

First we create a method and store the value into variable.


  methods: {
    getCol(e) {
      this.selColor = e.target.style.background;
       
    },

In the template we can use the method in a class binding or in a event as follows

 <div
          @click="getCol"
          title="#FF6900"
          class="colorContainer"
          style="background: rgb(247, 141, 167)"
        >

to access the tittle we can use e.target.title.

Notice that we need not pass the function argument in the template.

Following Vuejs posts may help you explore more

How to add data on MongoDB using Node-Express API

How to use Nodejs-Express API to perform CURD operations on MongoDB


In this tutorial we are going to do two important things

  • Create an API which is capable of perform CURD operation on MongoDB server
  • User the API to perform CURD in a web app

Making of the API

MongoDB is NoSQL database which is capable of running on the cloud and local alike.

  • How to create an API using Express in Nodejs

    API is an essential part of modern apps and web applications, it allow users to perform CURD operations using one single web interface. An identical API uses JSON structure to store and retrieve data. It is suitable for mobile app or another web app.

    One of the advantage of API is that it can be utilized by multiple applications. It also mean that the CURD operation need not be write again again and again in each applications.

    Not sure where to start learning ?, check out these Node tutorials

    API

    Let’s create a simple API using

    • Express
    • Joi
    • Nodejs

    Express

    Express help us create and manage web app pages or routes, it is the simplest way to create a web app in Nodejs. Many other NodeJS frameworks are build up on Express as the root.

    JOI

    JOI is a NPM package which help us create a schema for our API and validate.

    The source code

    const Joi = require("joi");
    const express = require("express");
    const app = express();

    app.use(express.json());
    const courses = [
    { id: 1, name: "course 1" },
    { id: 2, name: "course 2" },
    { id: 3, name: "course 3" },
    ];
    app.get("/", (req, res) => {
     res.send("Hello world");
    });

    app.get("/api/courses", (req, res) => {
     res.send(courses);
    });

    app.post("/api/courses", (req, res) => {
     const schema = {
       name: Joi.string().min(3).required(),
    };

     const result = Joi.validate(req.body, schema);
     if (result.error) {
       res.status(404).send(result.error.details[0].message);
       return;
    }
     const course = {
       id: courses.length + 1,
       name: req.body.name,
    };

     courses.push(course);
     res.send(course);
    });

    app.delete("/api/courses/:id", (req, res) => {
       const course = courses.find((c) => c.id === parseInt(req.params.id));
       if (!course)
           return res.status(404).send("The course not found");
           
     
       const index= courses.indexOf(course)
       courses.splice(index,1)    
       res.send(course)
    });

    function validateCourse(course) {
     const schema = {
       name: Joi.string().min(3).required(),
    };

     return Joi.validate(course, schema);
    }
    app.get("/api/courses/:id", (req, res) => {
     const course = courses.find((c) => c.id === parseInt(req.params.id));
     if (!course) res.status(404).send("The course not found");
     res.send(course);
    });

    const port = process.env.PORT || 3000;
    app.listen(port, () => {
     console.log(`listen on the port ${port}`);
    });

    The app has 5 APIs to perform CURD operations, as you noticed that all API routes are organized in the /api/ route which is a common standard. A secure API also uses a security key to access the data.

    The API add,remove,delete,update courses. For update the data I used PUT method which is actually update all the data. .An alternative to this is a PATHCH which update one only one

    The Slice method is used to remove data from the collection, Push is used to add a new data and find will fetch data from the JSON collection.

    How to run and Test API

    As you may noticed that this app don’t have UI for operations. API usually lack , because they are meant for developers and not to all users, so UI is less important. In order to test the API you should have Postman Like application, where you can test POST,GET,PUT APIs. Postman can be used for free, all you need to register and download the desk app for your plat form.

    In the New / Next to Launch Pad you can create, test new request and in the Body – > raw you can use JSON data.

$(function () {
// code block here
}

HTML Web app

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

Using the API – GET and POST request

The GET request is used to get a list of data, says product list,users list, customer list etc and the POST send data to the server. By default API call will make GET request

POST API Call using jQuery and AJAX

How to make a POST API call in HTML/web app using jQuery and AJAX


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to make a POST API request in HTML/web app using jQuery and AJAX? POST request used to send data to the server.

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

How to make POST API request

In this example we are about to add data into the server using API POST method.

The GET request is used to get a list of data, says product list,users list, customer list etc and the POST send data to the server. By default API call will make GET request

In the script file you can add following code to access the API, in our example it is a list of users

 $("#submit-btn").on("click", function () {
    var inputUname = $("#input-uname");
    var inputEmail = $("#input-email");
    var inputPass = $("#input-passwd");
  
    $.ajax({
      url: "/api/user",
      method: "POST",
      contentType: "application/json",
      data: JSON.stringify({
        uname: inputUname.val().trim(),
        email: inputEmail.val().trim(),
        pass: inputPass.val().trim(),
      }),
      success: (response) => {
        alert("New user created");
        inputUname.val("");
        inputEmail.val("");
        inputPass.val("");
        $("#btn-get").click();
      },
      error: (err) => {
        alert("Please fill the boxes");
      },
    });
  });

the AJAX call is made inside the document ready function, which will execute only after the complete web page is loaded. The ajax call has following properties

  • url – the API itself
  • contentType – type of the content , it can be json structured in many cases.
  • method – POST/GET
  • data – a JSON data to the server
  • Success – function that will execute after the call made successfully
  • error : – can be arrow function for handling errors

The success function return a response , in which our retiring data is packed. In this example the new user object.

Some jQuery post will help you to extend the functionality of your app.

GET API Call using jQuery and AJAX

How to make a get API call in HTML/web app using jQuery and AJAX


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to make a GET API request in HTML/web app using jQuery and AJAX?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

How to make GET API request

We have learned how create an API and test API with Post Man client. if you miss the post here it is.

We need to access the API in the real world applications. We can use JavaScript for web apps for that and the best way to do is using jQuery and AJAX.

The GET request is used to get a list of data, says product list,users list, customer list etc and the POST send data to the server.

In the script file you can add following code to access the API, in our example it is a list of users

$(function () {
 $("#btn-get").on("click", function () {
   //List users using API with AJAX

   $.ajax({
     url: "/api/user",
     contentType: "application/json",
     success: function (response) {
       // console.log('success');
       var el = $("#usr-group");
       el.html("");
       response.users.forEach(function (usr) {
         el.append('<li class="list-group-item">' + usr.uname + "</li>");
      });
    },
  });
});
});

the AJAX call is made inside the document ready function, which will execute only after the complete web page is loaded. The ajax call has following properties

  • url – the API itself
  • contentType – type of the content , it can be json structured in many cases.
  • Success – function that will excecuted after the call made successfully
  • error : – can be arrow function for handling errors

The success function return a response , in which our data is packed. In this example the users object. we can iterate through the object list and add to the webpage using jQuery.

Some jQuery post will help you to extend the functionality of your app.

How to create animated tool tip container with CSS and jQuery

How to add a custom animated tool tip functionality using CSS and jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn to create custom tool-tip container with CSS and jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

and the container look like the following (HTML)

 <section class="tool-tip-hide alert text-info" id="ask-tool-tip">            
                   </section>

CSS

Here is our CSS code to hide and show the container

.tool-tip-hide{
    display: none;
}
.tool-tip-show{
    display:inline     ;
}

jQuery code

 $(function () {
  
  var info = $("#ask-tool-tip");
  function resetTooltip() {
    info.removeClass("tool-tip-show");
    info.addClass("tool-tip-hide");
    info.html('')
  }

  resetTooltip();

 async function Message(msg) {
    resetTooltip();
    info.html("");
    info.append(`<i>${msg} !</i>`);
    info.removeClass("tool-tip-hide");
    info.addClass("tool-tip-show").fadeOut(3000, () => {
        info.fadeIn()
  
    });
  
  }
$("#btn-click").on("click", () => {
 Message("Thank you");
})

}

In the above jQuery we are done the following

  • locate the container adding class to the HTML ( tool-tip-hide)
  • create custom method for setup message with animation
  • call the Message function inside a event handler

How to add/remove CSS class using jQuery

How to add and remove visual appearance (CSS) to container using jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn change visual UI features by adding/removing CSS class from jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Add or Remove CSS class

jQuery has capability of adding and removing properties of DOM elements such as class. It will be help us to change the visual appearance of the container according to user interations

   el.addClass('class-name')
   el.removeClass('class-name')
  

using el.find() can check for the the existence of the class

How to show/hide DOM element using jQuery

How to show and hide a div with jQuery.


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to show and Hide a div with JQuery

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
 
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Show and Hide action

   $("#show-btn").on("click", function () {
 var el=$('#element')
 el.show().fadeIn(1000)
}
  $("#hide-btn").on("click", function () {
 var el=$('#element')
 el.hide().fadeIn(1000)
}

By using the id of the div we access the element and call the show/hide method. We can add cool animation with jQuery too.

How to redirect a page in jQuery

How to redirect a web page in jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks. Let’s learn how to redirect to a webpage or route in jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Redirecting the page

Using the Window.location we can redirect to another webpage or route as follows

   
 window.location.href = "/home.html";

The href can be a web page or an external link . The following post may help you to explore jQuery