RichTextEditor不适用于ASP.NET MVC5中的多个字段

Question

我想在mvc 5中创建一个如下图所示的表单

您会看到它有两个用于英语和阿拉伯语的Rich Edit Text字段，我跟着this Tutorial添加了这些富文本字段。

但是，当我把它像下面的图像，富文本字段之一无法正常工作

这是视图页面中的相关代码段

    <div class="form-group">
    @Html.LabelFor(model => model.ProductAbstractEn, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.ProductAbstractEn, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.ProductAbstractEn, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.ProductAbstractAr, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.ProductAbstractAr, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.ProductAbstractAr, "", new { @class = "text-danger" })
    </div>
</div>

这是这些字段的模型类代码段

    [UIHint("tinymce_full_compressed"), AllowHtml]
    [Display(Name = "English")]
    public string ProductAbstractEn { get; set; }

    [UIHint("tinymce_full_compressed"), AllowHtml]
    [Display(Name = "Arabic")]
    public string ProductAbstractAr { get; set; }

请您提及我如何才能使这两个字段可行

已编辑的代码 tinymce_full_compressed.cshtml

  <script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

<script type="text/javascript">
(function(){tinyMCE.init({mode:"exact",elements:"@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",theme:"advanced",height:"500",width:"790",verify_html:false,plugins:"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",theme_advanced_buttons1:"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2:"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3:"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",theme_advanced_buttons4:"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",theme_advanced_toolbar_location:"top",theme_advanced_toolbar_align:"left",theme_advanced_statusbar_location:"bottom",theme_advanced_resizing:false,content_css:"@Url.Content("~/Scripts/tinymce.3.4.5/css/content.css")",convert_urls:false,template_external_list_url:"lists/template_list.js",external_link_list_url:"lists/link_list.js",external_image_list_url:"lists/image_list.js",media_external_list_url:"lists/media_list.js",})})();
</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

Answer 1

我从你的教程中安装了NuGet包，这就是我想出来的。

在您的模板（tinymce_full_compressed，tinymce_full）中，您有字符串：

<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

这就是组件脚本所在的位置。因为您将此模板用于2个属性，所以您基本上在View中添加了2个脚本链接，这就是导致问题的原因。

当我使用这个组件时，我解决了这个问题：

从模板中删除<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>字符串。

在模板中更改此代码。

(function(){ 

    tinyMCE.init({

        // General options
        mode: "exact",
        elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
        ... //here more optins, don't touch them
    });

})();

到此代码：

$(document).ready(function () { //To make sure that DOM is loaded
    $('#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)').tinymce({ //changed selector for initialization

                mode: "exact",
                // Location of TinyMCE script
                script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")', //this line should fix your problem in script adding
            ... //here more optins, don't touch them
        }); 
})();