Question

142

How do I get tinyMCE editor instance by the element selector?

rated 0 times [ 143] [ 1] / answers: 1 / hits: 41144 / 8 Years ago, sun, april 3, 2016, 12:00:00

I want to set a content of tinyMCE editor after it was created with an AJAX request. I have several editors on page. All them are initialised with:

tinymce.init({

        selector: '.tiny-mce'

    });

Each editor has a distinct class to separate it from each other.
How do I use this class to set content to a one particular editor, after getting data with an AJAX request?

tinyMCE.get('.class_name') // returns null

I am searching API and SO and can't find a function to do such a simple thing.

Edit:

I found not so clean way to get the editor instance. When tinyMCE was created it added id with editor name to the element. Now I can do something like this:

var id = $('.class_name').attr('id');

tinyMCE.get(id).setContent('new content');

But is there a better way?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neildrews

Add To Favorites

Follow

Total Points: 166

Total Questions: 103

Total Answers: 85

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

neildrews questions

1 scrollIntoView() doesn't scroll anywhere

Fri, Feb 18, 22, 00:00, 2 Years ago

1 MUI - makeStyles - Cannot read properties of undefined

Tue, Oct 12, 21, 00:00, 3 Years ago

1 How to select an option of a slim select with jquery

Tue, Mar 23, 21, 00:00, 3 Years ago

1 Angular: How to refresh a part of html ( form / div / table )

Wed, Aug 19, 20, 00:00, 4 Years ago

1 How to access plugin from nuxt.js store?

Sun, Aug 16, 20, 00:00, 4 Years ago

View All

answered 8 Years ago ryderalfonsos · Accepted Answer

Per the get() API the string you pass to that call needs to be the ID of the editor element not a Class.

https://www.tinymce.com/docs/api/class/tinymce/#get

So if you want to target the editor based on the ID you need something like this:

<textarea class='tiny-mce' id='editor1'></textarea>

<textarea class='tiny-mce' id='editor2'></textarea>

... and in your JavaScript something like this...

tinymce.get('editor2').setContent('...content here...');

If you only have one editor on the page you can also use

tinymce.activeEditor.setContent('...content here...');

EDIT: It depends on when in the editor's lifecycle you want to call the get() or activeEditor methods.

These won't return anything until after TinyMCE is fully initialized. If you have code like this:

<form method=post action=dump.php>

    <textarea class='tiny-mce' id='editor1'></textarea>

    <textarea class='tiny-mce' id='editor2'></textarea>  

</form>

<script>

    tinymce.get('editor2').setContent(content here);

</script>

This will typically fail because you don't know if TinyMCE is finished initializing the textareas when your JavaScript is running. Please see this fiddle:

http://fiddle.tinymce.com/gufaab/1

The best way to load content into the editor is to use the editor's own init callback and place your code in there. For example:

tinymce.init({

    selector: textarea,

    plugins: [

        advlist autolink lists link image charmap print preview anchor,

        searchreplace visualblocks code fullscreen,

        insertdatetime media table contextmenu paste

    ],

    toolbar: insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image,

    setup: function (editor) {

        editor.on('init', function () {

             this.setContent('The init function knows on which editor its called - this is for ' + editor.id);

        });

    } 

});

...note that the init gets called for each editor (if there are multiple) and you have access to the editor object in the DOM if needed.