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.
Download tinymce plugin and more detail to visit the official site.
Simply include tinymce.min.js in your HTML.
<script src="http://scriptsgurus.com/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="http://scriptsgurus.com/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>