There are many web applications which requires rich text editor (similar to notepad or any other text editor) such as blogging engine like WordPress or Blogger, feedback form, Online editors etc. In this tutorial i am going to explain how to develop rich text editor using jQuery and store them in MySQL database.
Demo application:
For the demo purpose i have made the text editor and save facility which store the information in database and load it in text editor and vice versa.
See the Pen maHhk by Shahid Shaikh (@codeforgeek) on CodePen.
Implementation:
I found one very lightweight, simple and easy to customize jQuery plugin called as jqte. You can download the code and use it under your project. All you need to do is write this code.
* Load all the required files.
*/
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery-te-1.4.0.min.js"></script>
/*
* Call the jqte function.
*/
<script>
$("textarea").jqte();
</script>
That’s it. This is our simple WYSIWYG editor which converts every textarea present on page to rich text editor. You can pass the ID of the element as well.
How to use it:
Download the package from jqte official site and upload the jqte css,js and png file to your server. Make sure you have jquery attach to your page.
Then code any textarea in html body and pass the ID of that textarea in the JavaScript code. Like i have shown in demo application above, it return the parsed data which in turn you can save in MySQL database and retrieve them any time and browser will parse the HTML tag and you will have the formatted text.
Let’s say you want to save the text written in your editor. All you need to do is call your server side script like PHP or Node. Make a connection to database and push it.
That’s all for now. If you have any doubts let me know in comments.
