TINYMCE properties and methods. Inserting tags, outputting values

In this article we will look at the main properties and methods of the TinyMCE text editor. Let's learn how to insert tags into a selected fragment of text, insert tags in place of a selector in the text, and use JS to obtain the HTML code of the edited text and text without HTML entities. I apologize in advance for the excessive tautology in the examples. I thought unnecessary repetition would be appropriate and would deprive the article of doubts and understatement.

Get text editor values

In this section we will look at examples of outputting the contents of a text editor, selected fragments in various output options: text, HTML. Examples, as a rule, will be given in various versions: active TinyMCE editor, selecting an editor by ID. All functions return a string value.

Examples of calling a method that returns the entire contents of the TinyMCE text editor as HTML code

The first example demonstrates a function with which we can get the HTML content of the active TinyMCE text editor:

 tinyMCE.activeEditor.getContent();

The second example also returns the contents of the TinyMCE editor, where content id is the id of the textarea tag of the text editor:

 tinyMCE.get('content id').getContent();

jQuery version of getting HTML content, where  content id is the id of the textarea tag of the text editor:

 $('#content id').html();

Examples of calling a method that returns the entire contents of the TinyMCE text editor as text

The first example demonstrates a function with which we can get the contents of the active TinyMCE text editor as text:

 tinyMCE.activeEditor.getContent({format : 'text'});

The second example also returns the contents of the TinyMCE editor as text, where  content id is the id of the textarea tag of the text editor:

 tinyMCE.get('content id').getContent({format : 'text'});

Examples of calling a method that returns the contents of selected text in the TinyMCE text editor as HTML code

Active TinyMCE editor:

tinyMCE.activeEditor.selection.getContent();

TinyMCE editor, where  content id  is the id of the textarea tag of the text editor:

tinyMCE.get('content id').selection.getContent();

Examples of calling a method that returns the contents of selected text in the TinyMCE text editor as text

Active TinyMCE editor:

tinyMCE.activeEditor.selection.getContent({format : 'text'});

TinyMCE editor, where  content id  is the id of the textarea tag of the text editor:

tinyMCE.get('content id').selection.getContent({format : 'text'});

Other functions and methods of TinyMCE text editors

An example of calling an editor method that returns the id of the active text editor:

tinyMCE.activeEditor.id;

An example of calling the TinyMCE active editor method, returning the name of the selected tag in the editor:

tinyMCE.activeEditor.selection.getNode().nodeName;

An example of calling the TinyMCE editor method, returning the name of the selected tag in the editor, where  content id is the id of the textarea tag of the text editor:

tinyMCE.get('content id').selection.getNode().nodeName;

Insert or replace HTML tags in TinyMCE text editor

This section of the article will consider examples of accessing the methods and functions of the TinyMCE text editor that facilitate editing and inserting tags and text into the desired fragment of html code or text.

A method that allows you to insert a tag into the active TinyMCE text editor:

 tinyMCE.activeEditor.execCommand("mceInsertContent", false, '<b>Hello world!</b>');

A method that allows you to insert a tag into the TinyMCE text editor, where   content id is the id of the textarea tag of the text editor:

 tinyMCE.get('content id').execCommand("mceInsertContent", false, '<b>Hello world!</b>');

A method that allows you to replace the selected text of the active TinyMCE text editor, where  {$selection} is the selected text of the active text editor:

tinyMCE.activeEditor.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');

A method that allows you to replace the selected text of the TinyMCE text editor, where  {$selection} is the selected text of the active text editor; content id — id of the textarea tag of the text editor :

tinyMCE.get('content id').execCommand('mceReplaceContent',false,'<b>{$selection}</b>');

A method that allows you to replace the selected HTML code of the active text editor TinyMCE, where  {$selection} is the selected text of the active text editor:

tinyMCE.activeEditor.execCommand('mceReplaceContent',false,'<i>'+tinyMCE.activeEditor.selection.getContent({format : 'html'})+'</i>');

A method that allows you to replace the selected HTML code of the TinyMCE text editor,  where  {$selection}  is the selected text of the active text editor;  content id — id of the textarea tag of the text editor :

tinyMCE.get('content id').execCommand('mceReplaceContent',false,'<i>'+tinyMCE.activeEditor.selection.getContent({format : 'html'})+'</i>');

Switching TinyMCE modes

The text and graphic editor TinyMCE provides text editing modes. In this section, we will look at methods for switching text editor modes.

A method that allows you to switch the active TinyMCE text editor to graphic editor mode:

tinyMCE.activeEditor.show();

A method that allows you to switch the active TinyMCE text editor to graphic editor mode, where content id is the id of the textarea tag of the text editor : 

 tinyMCE.get('content id').show();

A method that allows you to switch the active TinyMCE text editor to text editor mode:

tinyMCE.activeEditor.hide();

A method that allows you to switch the active TinyMCE text editor to text editor mode, where  content id is the id of the textarea tag of the text editor : 

 tinyMCE.get('content id').hide();

Bottom line

As you have already noticed, the TinyMCE text editor has a lot of methods and functions that simplify working with the editor and allow flexible configuration and adaptation of the editor to suit your needs and tasks. The methods, functions and examples given in this article are not exhaustive. The article describes the basic methods of working with the editor, which will help you solve a lot of problems.

See the full API on the official website of the TinyMCE editor.

Thank you all for your attention!