Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

How to create text editor in textarea using jquery

by
Category:javascript
javascript jquery
How to create text editor in textarea using jquery

This tutorial will teach you that how you can create text editor using jQuery, I am 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 plugin page.

Plugin i used to make this tutorial tinymce plugin its a very easy to integrate.

Download tinymce plugin and more detail to visit official site.

Simply include tinymce.min.js in your html.

<script src="http://bladephp.co/download/tinymce/js/tinymce/tinymce.min.js"></script>

Initialize this tinymce editor on 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="http://bladephp.co/download/tinymce/js/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>

0 Comments


Html code work in comment box


Related Post