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

Posted 2023-03-22

【中文标题】以编程方式将数据加载到 TinyMCE

【英文标题】：Load data into TinyMCE programmatically

【发布时间】：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();
    );
    

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

【参考方案1】：

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

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

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

【参考方案2】：

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

【参考方案3】：

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

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

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