WYSIWYG stands for What You See Is What You Get. WYSIWYG Html Editor is basically JavaScript rich text editor which allows user to enter formatted text . This is basically on textarea so that website user can easily create content and do its formatting. In simple textarea user can simply write text but they can’t make formatting. So in this tutorial we will discuss How to Add WYSIWYG HTML Editor to Textarea on Your Site.

Tinymce is most used free and advanced html editor to integrate in your website. We will see an example about how to integrate tinymce editor to textarea into site. It is also easy to integrate into your website.

Let’s proceed to start the steps

Download Tinymce

First download latest Tinymce plugin here.

HTML

JavaScript

Unzip the downloaded package and upload tinymce folder to js folder. Include JS file to webpage as shown below.

Add given below snippet to change textarea to text editor.

That’s all. The above given script will change form textarea to html editor.

After loading a text editor you will see its branding message like
POWERED BY TINYMCE. Use the given below script will hide this message.

To hide/disable “Powered by TinyMCE” message

tinymce.init({
 branding: false // To hide/disable "Powered by TinyMCE" message.
});

To set Text editor Height and Width

tinymce.init({ selector:'#pclu-textarea',branding: false,width: "450",height: "200" });

Full Example:

Add WYSIWYG HTML Editor to Textarea on Your Site
 

How to Save Text editor content to Database?

If you are using form with get method , then you can retrieve textarea value using $_GET[“pc-textarea“] and if post method, then $_POST[“pc-textarea”] and save it to database.

Demo

The post Add Wysiwyg Html Editor to Textarea on Your Site appeared first on PHPCluster.