以编程方式将数据加载到 TinyMCE答案

【问题标题】：Load data into TinyMCE programmatically以编程方式将数据加载到 TinyMCE
【发布时间】：2019-05-30 04:28:46
【问题描述】：

我想使用 tinyMCE 增强多个文本区域。我可以通过在页面中的所有文本区域上初始化 TinyMCE 来将文本区域显示为富文本编辑器，如下所示：

$(function () {
    tinymce.init({
        selector: "textarea",
        statusbar: false,
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });
});

这也处理了 Tiny 编辑器和实际文本区域之间的同步过程。

填充文本区域的我的 html 如下所示：

<div id="divEditor1" class="container-fieldset">
    <div class="editor-label-field" style="left: 50px">
        <%:Html.LabelFor(Function(model) model.divEditor1, "divEditor1")%>
    </div>
    <div class="editor-field-fn">
        <%:Html.TextBoxFor(Function(model) model.divEditor1,  New With { Key .class = "ucase-input" } )%>
        <%:Html.ValidationMessageFor(Function(model) model.divEditor1)%>
    </div>
</div>
    <div id="divEditor2" class="container-fieldset">
    <div class="editor-label-field" style="left: 50px">
        <%:Html.LabelFor(Function(model) model.divEditor2, "divEditor2")%>
    </div>
    <div class="editor-field-fn">
        <%:Html.TextBoxFor(Function(model) model.divEditor2,  New With { Key .class = "ucase-input" } )%>
        <%:Html.ValidationMessageFor(Function(model) model.divEditor2)%>
    </div>
</div>
... etc

我可以像这样阅读 TinyMCE 编辑器的内容：

for (var i = 0; i < numberOfEditors; i++) {           
    sFieldValue = document.getElementById("FormFieldText" + i).value;
    //sFieldValue = tinyMCE.get("FormFieldText" + i).getContent(); -> or like this, works just as well.
};

我遇到的问题是让 TinyMCE 编辑器框显示页面加载时已经存在的文本（从数据库读取的文本），因为它总是显示为空文本框。但是，文本在后台的原始文本区域中正确导入。格式化和转义，因为它经过了一些 ajax 调用。

我看到我可以像这样设置 tiny 的内容：

tinyMCE.get('my_editor').setContent(data);

但是，我需要以编程方式执行此操作，以使我页面上的所有文本区域都将信息导出到 tiny。和上面一样

setup: function (editor) {
    editor.on('change', function () {
        editor.save();
    });
    }

另外，什么时候是对文本进行解码的合适时间？（我认为这一步是必要的）

【问题讨论】：

标签： javascript tinymce textarea richtextarea

【解决方案1】：

如果您在每个textarea 拥有其内容之前在每个textarea 上初始化TinyMCE，那么当textarea 更新内容时TinyMCE 不会自动返回并自行更新——它只是不能那样工作.

获得数据后，您可以使用 TinyMCE API（正如您在帖子中已经知道的那样）来更新编辑器的内容。或者，您可以延迟初始化 TinyMCE，直到将数据提取到每个 textarea 之后。

这两种方法都不是更好/更差 - 当然有多种方法可以解决这个问题，如果实施得当，它们都可以工作。

【讨论】：

【解决方案2】：

我最终通过 ID 解析了活动 tinymce 实例的列表，并使用后台文本区域中的相应文本填充每个实例。

【讨论】：

【解决方案3】：

我发现这篇文章是为了寻找一种解决方案，将数据库中的数据返回到 tinymce，结果我得到了

<textarea id="textarea"><?= htmlspecialchars($description); ?></textarea>

只需使用 php 和数据库中数组中的变量。

【讨论】：