Add WYSIWYG HTML Editor to Textarea on Your Site

Add WYSIWYG HTML Editor to Textarea on Your Site

by

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.

Add WYSIWYG HTML Editor to Textarea on Your Site

Let’s proceed to start the steps

Download Tinymce

First download latest Tinymce plugin here.

HTML

<textarea name="pc-textarea" id="pclu-textarea"></textarea>

JavaScript

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

 <script src="js/tinymce/tinymce.min.js"></script>

Add given below snippet to change textarea to text editor.

<script>tinymce.init({ selector:'#pclu-textarea' });</script>

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. 

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:

<!DOCTYPE html>
<!--
Tutorial : Add WYSIWYG HTML Editor to Textarea
Author   : Vikash Kumar Singh
Blog     : phpcluster.com
-->
<html>
<head>
<title>Add WYSIWYG HTML Editor to Textarea on Your Site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'#pclu-textarea',branding: false });</script>
</head>
<body style="text-align:center;">
<div>
<h1>Add WYSIWYG HTML Editor to Textarea on Your Site</h1> 

<form method="POST" style="width:50%;text-align:center;margin: 0 auto;">
<textarea name="pctextarea" id="pclu-textarea"></textarea>
</form>

</div>
</body>
</html>

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

 

Leave a Comment