Question

我想使用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编辑器框显示页面加载时已经存在的文本（从数据库读取的文本），因为它始终显示为空文本框。但是，文本将正确导入backrgound的原始文本区域中。格式化并转义，因为它经历了一些ajax调用。

我已经看到我可以这样设置微小的内容：

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

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

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

而且，什么时候才是对文本进行小尺寸阅读的正确时间？（我认为此步骤是必需的）

Answer 1

如果您在每个textarea包含内容之前在每个textarea上初始化TinyMCE，则TinyMCE不会自动textarea更新内容时自动返回并自行更新-只是不能那样工作。

获取数据后，您可以使用TinyMCE API（您已经从帖子中了解到）来更新编辑器的内容。另外，您可以延迟初始化TinyMCE，直到将数据提取到每个textarea中为止。

这两种方法都不是更好/更糟-当然有多种方法可以解决此问题，并且如果实施得当，它们都会起作用。

Answer 2

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

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

2 个答案: