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
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***
Comments (0)