将 TinyMCE 与 Fancybox 一起使用

Question

我有一个使用插件的应用程序。这些插件将有自己的控制器、剃刀视图等。我正在使用主应用程序中的 Fancybox 通过 ajax 将一些部分视图加载到弹出窗口中。效果很好。我现在遇到的问题是尝试将微型 MCE 应用于fancybox 内的文本区域。插件中的 textareas 都必须指定一个 css 类名，如果它们想成为富文本。在这种情况下，kx-richtext。

局部视图：

<div class="form-group">
        @Html.LabelFor(m => m.BodyContent)
        @Html.TextAreaFor(m => m.BodyContent, new { @class = "kx-richtext" })
        @Html.ValidationMessageFor(m => m.BodyContent)
    </div>

Fancybox：

这是我在主应用程序_Layout.cshtml 页面上的 Fancybox 配置。

$('[data-toggle="lightbox"]').fancybox({
    type: 'ajax',
    autoSize: false,
    scrolling: 'yes',
    autoHeight: true,
    minHeight: 250,
    iframe: {
        scrolling: 'auto',
        preload: false
    },
    beforeLoad: function () {
        var width = this.element.data('fancybox-width');
        if (width) {
            this.width = parseInt(width);
        }

        var height = this.element.data('fancybox-height');
        if (height) {
            this.height = parseInt(height);
        }

        if (this.type == "iframe") {
            this.padding = 0;
        }
    },
    afterLoad: function () {
        initRichTextFull();
        //tinymce.EditorManager.execCommand('mceRemoveEditor', false, ".kx-richtext");
        //tinymce.EditorManager.execCommand('mceAddEditor', false, ".kx-richtext");
    }
});

TinyMCE 配置

function initRichTextFull() {
                tinymce.init({
                    selector: "textarea.kx-richtext",
                    theme: "modern",
                    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",
                        "emoticons template paste textcolor"
                    ],
                    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                    toolbar2: "print preview media | forecolor backcolor emoticons",
                    image_advtab: true,
                    templates: [
                        { title: 'Test template 1', content: 'Test 1' },
                        { title: 'Test template 2', content: 'Test 2' }
                    ]
                });
            }

如果不使用fancybox，或者如果我将tinymce 配置复制并粘贴到插件中的局部视图本身，上述tinymce 配置工作得非常好。但是，我实际上不能接受它作为解决方案。因为我只需要从主应用程序应用 tinymce 配置。

我可以看到 Fancybox afterLoad 函数正在被调用，但它似乎对 tinymce 没有任何作用。

有什么建议吗？

Answer 1

没关系，我有一个很好的解决方案：只需使用 EditorTemplates。我最终做了以下事情：

在模型属性上添加这个：

[UIHint("RichTextEditorFull")]

然后在插件中使用EditorFor而不是TextAreaFor，最后：

在主应用程序中创建RichTextEditorFull 编辑器模板

就我而言：

@{
    string fieldName = @ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty);
    string value = (string)ViewData.TemplateInfo.FormattedModelValue;
}

@Html.TextArea(string.Empty, value)

<script type="text/javascript">
    $(document).ready(function () {
        tinymce.init({
            selector: "textarea#@fieldName",
            theme: "modern",
            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",
                "emoticons template paste textcolor"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            toolbar2: "print preview media | forecolor backcolor emoticons",
            image_advtab: true,
            templates: [
                { title: 'Test template 1', content: 'Test 1' },
                { title: 'Test template 2', content: 'Test 2' }
            ]
        });
    });
</script>

就这么简单。