How to Add WYSIWYG/TinyMCE to Any Textarea

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

  1. Download TinyMCE or Integrate CDN
  2. Use TinyMCE to Textarea
  3. The Complete Example
  4. 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.


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.