时间戳

首页 > 解决方案 > 以编程方式将数据加载到 TinyMCE

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

问题描述

我有多个要使用 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);

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

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

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

标签： javascripttinymcetextarearichtextarea

解决方案

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

推荐阅读