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
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.
Share on Social Media
Comments
No comments yet…