How to create text editor in textarea using jquery

admin | Posted on May 10, 2021 |

This tutorial will teach you how you can create text editor using jQuery, here we are using a jQuery plugin (TinyMCE ) to create this tutorial. There is many features in this plugin like undo, styleselect, bold italic, link image, codesample, alignleft aligncenter alignright Justif, forecolor backcolor, fullscreen and many more you can get in the plugin page.

The plugin used to make this tutorial is a TinyMCE plugin. it’s very easy to integrate.

Simply include tinymce.min.js in your HTML.

<script src="https://scripts.guru/download/tinymce/tinymce.min.js"></script>

Initialize this TinyMCE editor on the text area.

<script>
  tinymce.init({ 
        selector:'textarea',
        plugins:'link code image textcolor',
        toolbar: [
        "undo redo | styleselect | bold italic | link image",
        "alignleft aligncenter alignright Justify | forecolor backcolor",
        "fullscreen"
    ]
  });
</script>

Above jQuery initialize methods and create TinyMCE text editor.

TinyMCE selector to textarea id

tinymce.init({ selector: "#myid" });

Complete page source here.

<!DOCTYPE html>
<html lang="en">
    <head>        
        <title>TextEditor</title>            
        <script src="https://scripts.guru/download/tinymce/tinymce.min.js"></script>
<script>
  tinymce.init({ 
        selector:'textarea',
        plugins:'link code image textcolor',
        toolbar: [
        "undo redo | styleselect | bold italic | link image",
        "alignleft aligncenter alignright Justify | forecolor backcolor",
        "fullscreen"
    ]
  });
</script>
</head>
<body>
    <textarea  rows="20" name="body"></textarea>
</body>
</html>

Leave a Reply Cancel reply