TinyMCE 设置内容问题答案

【问题标题】：TinyMCE Setting Content IssueTinyMCE 设置内容问题
【发布时间】：2019-11-05 21:16:16
【问题描述】：

我正在尝试设置 TinyMCE 编辑器的内容，但运气不佳。我已经尝试过预先设置 HTML 和初始化编辑器，并在编辑器初始化后设置内容但无济于事 - 我能够在 this fiddle 中重现那个内容（我无法先重现设置内容因为它使用数据库中的变量 HTML 来设置它）。

我想要做的几乎就是用我自己的代码：

            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

在初始化编辑器之前，data.Data.Description 会在 DIV 中显示文本，然后 TinyMCE 在初始化时会忽略它。

我只是迷路了，特别是因为它也不适用于 JSFiddle。之前还有其他人对此有疑问和/或我只是错过了什么吗？

【问题讨论】：

标签： javascript tinymce-4

【解决方案1】：

尝试在编辑器初始化后通过监听 init 事件来设置内容，例如：

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

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

【讨论】：

这确实适用于静态内容，就小提琴而言，这是一个加号。不幸的是，它仍然不会将 tinymce 的内容设置为 JSON 对象中的数据 --- 奇怪的是，现在我只是设置 HTML，然后初始化编辑器（就像我一直在尝试的那样），它现在正在工作... 不知道。不过谢谢你的想法！！

【解决方案2】：

没有看到正在运行的代码，我不能肯定地说，但这里的问题几乎可以肯定是 JavaScript 运行时间的问题。

TinyMCE init() 函数是异步。当您致电init() 时，该过程需要一些时间才能完成。在您的代码示例中，您立即尝试调用 activeEditor 或 get() 但可能没有初始化编辑器，因此这两种尝试都失败了。

确保 TinyMCE 完全初始化的正确方法是依赖init 事件。在 TinyMCE 完全初始化并准备好交互后触发此事件。

要通过init() 加载内容，您可以执行以下操作：

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>');
    });
  }
});

【讨论】：

【解决方案3】：

这对我有用：

 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)
  }

&lt;input type="text" class="annotation-session"&gt;

【讨论】：