在 ASP.NET MVC 5 中使用 tinyMCE 获取和设置 html 格式

Question

我有一个双语项目，每种语言都有一个故事。我想使用 TinyMCE 来格式化 Html 文本，并从数据库中设置这些文本区域。

这是我的博客模型：

型号:

    [Required(ErrorMessage = "Please add the news context")]
    [MinLength(10, ErrorMessage = "The length of news context must be 10 characters atleast")]
    [Display(Name = "News Context")]
    [UIHint("tinymce_jguery_full"), AllowHtml]
    public string newsContent { get; set; }

    [Required(ErrorMessage = "شرح خبر نمی تواند خالی باشد")]
    [MinLength(10, ErrorMessage = "حداقل طول شرح خبر 10 حرف است")]
    [Display(Name = "شرح خبر")]
    [UIHint("tinymce_jguery_full"), AllowHtml]
    public string newsContentFa { get; set; }

我也可以按照 NewsmanagementControler

中的代码使用 service.Get_Category_List() 方法成功获取该博客

控制器:

 public ActionResult Edit(int id)
 {
        using (DbModel db = new DbModel())
        {
            News SelectedNews = new News();
            var news = service.GetNews_ById(id);
            return View(news);
        }
 }

最后在视图中，我从数据库中获取的原始 Html 设置了 tinyMCE，代码如下：

查看

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>
<script type="text/javascript">
    tinymce.init({
        selector: 'textarea',
        mode: "textareas",
        theme: 'modern',
        entity_encoding: 'raw',
        height: 300,
        plugins: [
            'advlist autolink link lists charmap print preview hr anchor pagebreak spellchecker',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime nonbreaking',
            'save table colorpicker contextmenu directionality paste textcolor image'
        ],
        content_css: '../../Content/css/tinyMCE.css',
        toolbar: 'insertfile undo redo | styleselect | fontselect | sizeselect | fontsizeselect bold italic underline | alignleft aligncenter alignright alignjustify | ltr rtl | bullist numlist outdent indent | link | print preview fullpage | forecolor backcolor image',
        fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 36pt",
        font_formats: "Arial=arial,helvetica,sans-serif;" +
            "Arial Black=arial black,avant garde;" +
            "B Yekan=BYekan" +
            "Courier New=courier_newregular,courier;" +
            "Impact=impactregular,chicago;" +
            "Tahoma=tahoma,arial,helvetica,sans-serif;" +
            "Times New Roman=times new roman,times;" +
            "Verdana=verdana,geneva;" +
            "Webdings=webdings;" +
            "Wingdings=wingdings,zapf dingbats",
        draggable_modal: true
    });
</script>
@using (Html.BeginForm("Edit", "NewsManagement", FormMethod.Post))
{
        <div class="col-md-12 ltr">
            <br />
            <label for="MainContent">Context of Blog</label>
            @Html.TextAreaFor(m => m.news.newsContent, new { @class = "fullWidth tiny", placeholder = "Main Content" })
            @Html.ValidationMessageFor(m => m.news.newsContent, "", new { @class = "redError" })<br />
            <br />
        </div>
        <div class="col-md-12 rtl">
            <br />
            <label for="MainContentFa">شرح مطلب</label>
            @Html.TextAreaFor(m => m.news.newsContentFa, new { @class = "fullWidth tiny rtl", placeholder = "شرح مطلب" })
            @Html.ValidationMessageFor(m => m.news.newsContentFa, "", new { @class = "redError" })<br />
        </div>
}

我对 save raw Html tinyMCE 没有任何问题，但是为了在数据库中显示我存储的 raw html，有一个问题 - 如这个截图所示：

如您所见，原始 HTML 不会在 TinyMCE 中呈现。我在 google 和这里到处搜索，但根据我的问题没有任何正确答案。

Answer 1

如果您在 TinyMCE 的 HTML 中看到 HTML 标记，您的应用程序的某些部分可能会转义 HTML 以获得 "safety"。大多数现代框架默认都会这样做，但它们都有办法在需要时绕过此安全措施。

如果您查看传递给 TinyMCE 的数据，如果您看到类似以下内容：

&lt;p&gt;I have escaped tags&lt;/p&gt;

...相对于...

<p>I have escaped tags</p>

...然后您的应用程序中的某些内容正在转义 HTML，您只需要在将数据重新加载到 TinyMCE 时不转义 HTML 即可解决此问题。

Answer 2

默认情况下，在 MVC 中，所有 html 输入都是 html 出于安全原因进行编码，因此如果您想使用 html 标记作为输入控件的输入，那么您可以 html在你的解码在将它绑定到您的 html 助手之前查看

    @{
      Model.news.newsContent= HttpUtility.HtmlDecode(Model.news.newsContent);
     }

然后将其与您的 htmlHelper

一起使用

      @Html.TextAreaFor(m => m.news.newsContent, new { @class = "fullWidth tiny", placeholder = "Main Content" })

这个link可能对你有帮助 How to use @Html.Raw() in @Html.TextAreaFor()

在 ASP.NET MVC 5 中使用 tinyMCE 获取和设置 html 格式

Get and set html format using tinyMCE in ASP.NET MVC 5

c#

tinymce-4

asp.net-mvc-5