javascript - TinyMCE Setting Content Issue - Stack Overflow

admin管理员组

文章数量:1429566

I'm trying to set the content of the TinyMCE editor but I'm not having much luck. I've tried both setting the HTML beforehand and initializing the editor, and setting the content after the editor is initialized but to no avail - I'm able to reproduce that one in this fiddle (I can't reproduce setting the content first because it uses variable HTML from the database to set it).

Pretty much what I'm trying to do is this with my own code:

            Editor.innerHTML += '<label>Description</label><br><div id="AC-Description">' + data.Data.Description + '</div><br><br>'; // Editor is just a div & data is a json object return from an ajax call
            tinymce.init({
                selector: '#AC-Description'
            });
            tinymce.activeEditor.setContent(data.Data.Description); // does not work, same as in example fiddle.
            tinymce.get('AC-Description').setContent(data.Data.Description); // does not work either, same as in example fiddle

Before the editor is initialized, the data.Data.Description does show text in the DIV and then TinyMCE ignores it when it initializes.

I'm just at a lost, especially since it isn't working on JSFiddle too. Anyone else have issues with this before and/or am I just missing something?

I'm trying to set the content of the TinyMCE editor but I'm not having much luck. I've tried both setting the HTML beforehand and initializing the editor, and setting the content after the editor is initialized but to no avail - I'm able to reproduce that one in this fiddle (I can't reproduce setting the content first because it uses variable HTML from the database to set it).

Pretty much what I'm trying to do is this with my own code:

            Editor.innerHTML += '<label>Description</label><br><div id="AC-Description">' + data.Data.Description + '</div><br><br>'; // Editor is just a div & data is a json object return from an ajax call
            tinymce.init({
                selector: '#AC-Description'
            });
            tinymce.activeEditor.setContent(data.Data.Description); // does not work, same as in example fiddle.
            tinymce.get('AC-Description').setContent(data.Data.Description); // does not work either, same as in example fiddle

Before the editor is initialized, the data.Data.Description does show text in the DIV and then TinyMCE ignores it when it initializes.

I'm just at a lost, especially since it isn't working on JSFiddle too. Anyone else have issues with this before and/or am I just missing something?

• javascript
• tinymce-4

Share Improve this question Follow asked Nov 5, 2019 at 21:16 sys_adm_devsys_adm_dev 7322 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try to set the content when the editor has been initialized by listening to the init event like:

tinymce.init({
                selector: '#Editor'
            });

tinymce.get('Editor').on('init', function(e){
                e.target.setContent('test'); 
            });

Without seeing running code I can't say for sure but the issue here is almost certainly a timing issue of when your JavaScript run.

The TinyMCE init() function is asynchronous. When you call init() it takes some time for the process to plete. In your code example you are immediately trying to call either activeEditor or get() but there is likely no initialized editor so both of these attempts are failing.

The correct way to make sure that TinyMCE is fully initialized is to rely on the init event. This event is fired after TinyMCE is fully initialized and ready for interaction.

To load content via the init() you can do something like this:

tinymce.init({
  selector: "textarea",
  plugins: ["advlist autolink lists ..."],
  toolbar: "undo redo | bullist numlist ...",
  setup: function (editor) {
    editor.on('init', function (e) {
      //this gets executed AFTER TinyMCE is fully initialized
      editor.setContent('<p>This is content set via the init function</p>');
    });
  }
});  

This worked for me:

 import tinymce from 'tinymce';
 
 tinymce.init({
      selector: 'textarea',  // change this value according to your HTML
      toolbar: ' bold italic underline bullist',
      menubar: '',
      width : "926",
      placeholder: $('.annotation-session').data('placeholder'),
      plugins: 'lists',
      lists_indent_on_tab: false,
      setup: function (editor) {
          editor.on('init', function (e) {
              editor.setContent(window.userNotes.note);
          });
      }
  });
  
  //If you want you can set on startup line 12 - 14
  //And also on another funcion doing this:
  //Empty 
  tinymce.activeEditor.setContent('');  
  if (yourVariable !== '') {
      tinymce.activeEditor.setContent(yourVariable)
  }

<input type="text" class="annotation-session">

本文标签： javascriptTinyMCE Setting Content IssueStack Overflow