如何在同一页面上使用不同配置的两个 TinyMCE 编辑器

Question

我调试了一整天。

我有一个 ASP.NET MVC 项目和一个 TinyMCE 作为编辑器模板，但基本上问题是只显示了最后一个 TinyMCE。

@Html.TextArea(string.Empty, new { id = textAreaId, value = ViewData.TemplateInfo.FormattedModelValue })

<script type="text/javascript">
    tinyMCE.init({
        mode: "exact",
        elements: "textarea#@textAreaId",
        theme: "modern",
        inline: true,
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "template paste textcolor colorpicker textpattern imagetools"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "preview media | forecolor backcolor code | ltr rtl",
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ],
        file_picker_callback: function (callback, value, meta) {
            if (meta.filetype === 'image') {
                $('#@formId input').click();
            }
        }
    });
</script>

我这样调用 EditorTemplate：

@for (int i = 0; i < Model.Answers.Count; i++)
{
        @Html.EditorFor(
            model => model.Answers[i].Text,
            new
            {
                htmlAttributes = new { @class = "form-control" },
                textAreaId = string.Format("answer-textArea-{0}", i),
                formTargetId = string.Format("answer-formTarget-{0}", i),
                formId = string.Format("answer-form-{0}", i)
            })
}

到目前为止，我一直在尝试不同的模式、不同的选择器，甚至降级到 TinyMCE 3.0 - 没有效果。到目前为止，我在 Internet 上找到的所有解决方案都不适合我。我在控制台中遇到的唯一错误是 Theme 不是构造函数，但由于我在配置中更改为精确模式和元素，甚至过去显示的最后一个编辑器（可能是因为 tinyMCE.init 覆盖了之前的初始化或其他东西）没有显示，错误也是如此。老实说，我不知道如何解决这个问题。感谢任何帮助。

Answer 1

您完全可以拥有多个具有不同配置的编辑器。

由于 init() 调用是在浏览器中进行的，真正的问题是您的 ASP 代码在加载到浏览器中时会变成什么。

首先我不会使用 TinyMCE 3 - 它是一个非常旧的 TinyMCE 版本并且不再获得更新。您的示例似乎使用了 elements 配置选项，这是 TinyMCE 3 的一个选项，但不是 TinyMCE 4，所以这就是为什么它对 TinyMCE 4 根本不起作用的原因 - 您应该 return 使用 selector选项。

至于 TinyMCE 4 - 您应该使用 selector 配置选项来控制哪个配置对象适用于哪个 <textarea>:

https://www.tinymce.com/docs/configure/integration-and-setup/#selector

例如：

tinymce.init({        
    selector: "#area3",
    ...
});

选择器选项需要一个等同于页面上一个或多个元素的 CSS 选择器的字符串。上面的示例假设页面上的一个 <textarea> 的 ID 为 area3，因此单个 <textarea> 将被 TinyMCE 替换。

如果您尝试通过 ASP 代码动态创建多个配置，您需要像这样调试代码：

selector: "textarea#@textAreaId"

被评估为发送到浏览器的时间。如果 @textAreaId 被替换为有效 ID，您最终会得到类似

的内容

selector: "textarea#abc123"

...那么如果存在这样的文本区域，TinyMCE 将替换它。我怀疑你的 ASP 代码提供给浏览器的不是你想的那样，所以 TinyMCE 没有被调用。在没有看到这个运行的情况下，我们只能向您提供建议。

如何在同一页面上使用不同配置的两个 TinyMCE 编辑器

How can I have two TinyMCE editors on the same page with different configurations

asp.net

asp.net-mvc

tinymce-4