TinyMCE 在保存和重新加载数据后显示 html 标签答案

【问题标题】：TinyMCE displaying html tags after saving and reloading the dataTinyMCE 在保存和重新加载数据后显示 html 标签
【发布时间】：2023-03-11 01:43:01
【问题描述】：

TinyMCE 有点问题。

保存编辑器的内容并重新显示后，所有 HTML 标记都可见。

这就是我初始化编辑器的方式：

    tinyMCE.init({
      setup: function (ed) {
        ed.onSaveContent.add(function (ed, o) {
          o.content = o.content.replace(/&#39/g, '&apos');
        });
      },

      // General options
      mode: 'specific_textareas',
      theme: 'advanced',
      encoding: 'xml',
      entity_encoding: 'raw',
      height: '500',
      width: '100%',
      plugins: 'autolink,lists,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',

      editor_selector: 'rich-text-area',
      editor_deselector: 'text-area',

      // Theme options
      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_toolbar_location: 'top',
      theme_advanced_toolbar_align: 'left',
      theme_advanced_statusbar_location: 'bottom',
      theme_advanced_resizing: false,

      // Example content CSS (should be your site CSS)
      content_css: 'css/content.css',

      // Drop lists for link/image/media/template dialogs
      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',

      // Style formats
      style_formats: [
                    { title: 'Bold text', inline: 'b' },
                    { title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
                    { title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
                    { title: 'Example 1', inline: 'span', classes: 'example1' },
                    { title: 'Example 2', inline: 'span', classes: 'example2' },
                    { title: 'Table styles' },
                    { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
                ]
    });

重新显示后的数据：

存储在数据库中的数据：

&lt;p&gt;Testing&lt;/p&gt;

【问题讨论】：

标签： tinymce

【解决方案1】：

见http://www.tinymce.com/wiki.php/Configuration:encoding

看来你需要在你的配置上评论encoding: 'xml'。

【讨论】：

@Niloct 我在我的 vuejs 应用程序中遇到了同样的问题，我使用 Laravel 作为后端。对此有什么支持吗？
@WosleyAlarico 发布一个新问题，其中包含简化的代码和问题的详细信息。
@Niloct 好主意，我刚刚发布了一个新问题。 stackoverflow.com/questions/50953623/…

【解决方案2】：

在init函数下添加这个：

tinyMCE.init( {
    forced_root_block: false, // Start tinyMCE without any paragraph tag
} )

【讨论】：

【解决方案3】：

有一个选项可以让我们从以 html 标签形式存储的数据库中获取原始数据。 html.raw 用于此目的

在asp.net中@html.raw(object)是解决这个问题的方法

【讨论】：

【解决方案4】：

您可以在 @Html.Raw()

的帮助下删除 Html 标签

<p>we are Arrivaler web and Mobile development</p>

索引视图

@Html.Raw(var.description)

结果：

we are Arrivaler web and Mobile development

【讨论】：