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

【问题标题】：Get and set html format using tinyMCE in ASP.NET MVC 5在 ASP.NET MVC 5 中使用 tinyMCE 获取和设置 html 格式
【发布时间】：2020-01-28 22:23:31
【问题描述】：

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

这是我的博客模型：

型号：

    [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; }

我还可以使用service.Get_Category_List() 方法成功获取该博客，如下代码NewsmanagementControler

控制器：

 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>
}

我对保存原始 Html tinyMCE 没有任何问题，但是为了在数据库中显示我存储的原始 html，出现了问题 - 如下图所示：

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

【问题讨论】：

您在编辑器上看到的文本，例如"p dir_"ltr"> 这正是保存在您的数据库中的内容吗？编辑器应该去掉 HTML，但 HTML 确实显得有点不靠谱？
是的，它也使用 TinyMCE 保存到数据库中，并且 HTML 在从数据库中获取时不会在 TinyMCE 中呈现。

标签： c# asp.net-mvc-5 tinymce-4

【解决方案1】：

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

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

然后将它与您的 htmlHelper 一起使用

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

此链接可能对您有所帮助 How to use @Html.Raw() in @Html.TextAreaFor()

【讨论】：

【解决方案2】：

如果您在 TinyMCE 的 HTML 中看到 HTML 标记，您的应用程序的某些部分可能会为了“安全”而转义 HTML。大多数现代框架默认执行此操作，但它们都有在需要时绕过此安全措施的方法。

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

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

...而不是...

<p>I have escaped tags</p>

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

【讨论】：