How to Use TinyMCE Editor

TinyMCE Editor is a library to change the look of standard HTML elements into an editor that has several features such as trim the pages, headings, bullet numbering, insert links, insert images, and so forth.

There are several ways to use the TinyMCE editor in a project website. First, we can use a CDN TinyMCE has been provided by the official website of TinyMCE. Second, we can download and include the TinyMCE library into our project package.

TinyMCE can be used for free with the standard features. However, if we want to use features that are more, we could upgrade to a premium package with a price ^{$ 0:40 / month, pro package for $ 1.0 / month, and packages enterprise as needed.}

How to Use TinyMCE Editor

First, we have to include the TinyMCE library into a document that will use it. In this tutorial uses libraries from the CDN. Add the following code in the code & lt; head & gt; or before the closing & lt; / head & gt;

<script src="//cloud.tinymce.com/stable/tinymce.min.js"></script>

Second, create an input or textarea which will be converted into TinyMCE Editor. Example:

<textarea id="editor">Examples that will be converted into TinyMCE Editor</textarea>

Third, apply the editor into textarea. Create Javascript and enter the code as shown below:

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

Implementation editor with javascript code above will change all existing textarea in the page turned into TinyMCE editor. If you want to apply only in specific editor, we can replace with the id selector. example:

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

Sample script above will change that has a textarea id “editor” as applied TinyMCE.

Examples that will be converted into TinyMCE Editor

How to Eliminate menubar TinyMCE

By default, TinyMCE is displaying the menubar File, Edit, View, and along with the Format sub menu. If we want to eliminate the menubar is easy enough, just add the menubar option: false in java script code that we use. Example:

<script>
tinymce.init(
{
selector:'#editor2',
menubar: false
}
);
</script>

The result of the execution of code above will look like the demo below:
Examples that will be converted into TinyMCE Editor

How to Add Plug-in TinyMCE

By default, the plugin called by TinyMCE is undo, redo, formatting (Format), alignment (Align Text), and indenting. If we want to add other plugins it must add plugin option value is followed by the plugin name separated by spaces. Example:

<script>
tinymce.init(
                  {
                      selector: '#editor3',
                      menubar: false,
                      plugins: 'advlist autolink link image lists charmap print preview'
                  }
          );
</script>

The result of the execution of code above will look like the demo below:
Examples that will be converted into TinyMCE Editor

How to Change the Language TinyMCE

By default, TinyMCE will be displayed in English (en_US). If we want to show the editor in Indonesian it must add language options in the TinyMCE configuration.
Example:

<script>
tinymce.init(
  {
    selector: '#editor4',
    menubar: false,
    plugins: 'advlist autolink link image lists charmap print preview',
    language: 'id'
  }
</script>

The result of the execution of code above will change into Indonesian language editor and looks like below.
Examples that will be converted into TinyMCE Editor

How to retrieve the content from TinyMCE

How to retrieve content from the TinyMCE editor are as follows:

<script>
tinymce.init(
  {
    selector: '#editor5',
    menubar: false,
    plugins: 'advlist autolink link image lists charmap print preview',
    language: 'id'
  });
var data = tinyMCE.editors[$('#editor5').attr('id')].getContent({format: 'html'})
jQuery(function(){
jQuery("#ambil").click(function(){
alert(data)
});
});
</script>

Demo:

Examples that will be converted into TinyMCE Editor
Retrive Content