如何在同一页面上有两个具有不同配置的 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 根本不起作用 - 您应该返回使用 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 没有被调用。在没有看到这种运行的情况下，这就是我们可以向您提出的所有建议。