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

Question

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

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

但是当我把它像下面的图片一样时，富文本字段之一不起作用

这是 View 页面中的相关代码片段

    <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
        }); 
})();