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 - 没有效果。我到目前为止在互联网上找到的所有解决方案都不适合我。我在控制台中遇到的唯一错误是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",
    ...
});

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

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

selector: "textarea#@textAreaId"

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

的内容

selector: "textarea#abc123"

...那么如果这样的textarea存在，TinyMCE将取而代之。我怀疑你的ASP代码为浏览器提供的内容并不是你所想的，所以TinyMCE没有被调用。没有看到这种运行，我们可以建议你。

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

1 个答案: