Question

我有一个使用插件的应用程序。这些插件将有自己的控制器，剃刀视图等。我正在使用主应用程序中的Fancybox将ajax的一些部分视图加载到弹出窗口中。效果很好。我现在遇到的问题是尝试将小MCE应用于fancybox内的textarea。插件中的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>

就这么简单。

使用TinyMCE和Fancybox

1 个答案: