需要帮助了解如何在TinyMCE中使用setContent()函数

Question

我正在使用LocalStorage从第1页传递文本到第2页。Page2文本区使用TinyMCE编辑器。我在Tiny网站上发现了这个功能，我认为它就是为此目的而设计的。然而，我是新的Javascript和不能使它工作。有什么帮助吗?

TinyMCE页面和功能:

我的Html:

<div class=" form-group">
        <div class="col-sm-2 col-md-2"><label for="work">Scope of Work:</label></div>
        <div class="col-sm-10 col-md-10"><textarea id="wo_scope" class="form-control tinymce " rows="5" placeholder="Required / Maximum 500 characters" name="work" cols="50"></textarea></div>
    </div>

Answer 1

如果你想在页面加载时将内容加载到TinyMCE中，你可以使用setContent函数来做到这一点。但是在您尝试使用setContent之前，您需要确保TinyMCE已初始化。

最好的方法是将加载内容的代码放入TinyMCE的配置对象中。例如:

tinymce.init({
  ...
  setup: function (editor) {
    editor.on('init', function () {
        var dataFromLS = <code to get the HTML from local storage>;
        this.setContent(dataFromLS);
    });
  }
  ... 
});

使用setContent()的基本方法是将HTML作为方法的唯一参数传递给is。如果数据在本地存储只需先将其抓取到JS变量中然后这样做:

var dataFromLS = <code to get the HTML from local storage>;
tinymce.get('wo_scope').setContent(dataFromLS);

注意，在我上面提供的init示例中，您可以将编辑器实例称为this。您也可以根据您用TinyMCE替换的<textarea>的ID来获取它。一个更完整(正确)的示例可以这样做:

tinymce.get('wo_scope').setContent(datafromLS);

setContent()方法在TinyMCE的特定实例上工作，因此在调用setContent()之前需要有一个实例。我上面的例子展示了两种获取实例get()的方法，以及在init中使用this的方法。

注意:在上面的一个评论中，您使用tinymce.activeEditor -只有当您点击进入TinyMCE编辑器实例时才有效-这使其成为"活动"编辑器。如果你在页面加载时这样做，你几乎肯定还没有一个活动的编辑器