How to Add WYSIWYG/TinyMCE to Any Textarea

May 05, 2019
Article · 3 min
663 words

Like (0)
Favorite (0)

Today I’m going to show you how to integrate WYSIWYG or TinyMCE to any textarea on your website. We are going to finish this tutorial in only two steps.

Table of Contents

Download TinyMCE or Integrate CDN
Use TinyMCE to Textarea
The Complete Example
The Output

Step 1 : Download TinyMCE or Integrate CDN

At first, we have to download TinyMCE. You can get the latest TinyMCE from their official website. Download TinyMCE. In this tutorial, I’m sharing a CDN link. You use this. But I recommend you to buy the plugin from them. You can also take free API key from them.

The CDN URL is:

<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>

As like Bootstrap and other CDN, we have to just linkup the CDN in the web page.

Step 2 : Use TinyMCE to Textarea

The HTML code:

<textarea id="myTextarea"></textarea>

Then include the CDN link. After that write this JavaScript code to get the basic features of TinyMCE:

<script type="text/javascript">
tinymce.init({
    selector: '#myTextarea'
});
</script>

To get the advanced features write this:

<script type="text/javascript">
tinymce.init({
    selector: '#myTextarea',
    height: 300,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons',
    image_advtab: true
});
</script>

Step 3 : The Complete Example

This is the complete code after integrating all things:

<!DOCTYPE html>
<html>
<head>
    <title>WYSIWYG/TinyMCE Editor</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body class="container" style="margin-top: 50px">

<h3 class="text-center">WYSIWYG/TinyMCE Editor</h3><br>

<textarea id="myTextarea"></textarea>

<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: '#myTextarea',
    height: 300,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons',
    image_advtab: true
});
</script>

</body>
</html>

Step 4 : The Output

Now if we run this file, we will get outputs like below:

Basic features:

Advanced features:

Now you can easily integrate WYSIWYG editor to any textarea. Thank you.

Dev Tips

Md Obydullah

Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.