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="//"></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.

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:

The result of the execution of code above will look like the demo below:

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:

The result of the execution of code above will look like the demo below:

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.

The result of the execution of code above will change into Indonesian language editor and looks like below.

How to retrieve the content from TinyMCE

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


Tanya Jawab Anda memiliki pertanyaan seputar artikel yang dibahas atau topik lain? Silahkan ajukan pertanyaan Anda melalui program Tanya Nusagates atau posting di Forum Nusagates.
Konsultasi terkait tugas sekolah atau tugas kuliah juga diperbolehkan.

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: Hubungi via 0822 2500 5825

Tanggapan Kamu?

Back to top button