TinyMCE富文本中写入html内容被转义怎么解决?

问题描述

TinyMCE富文本中写入html内容被转义，导致展示的内容仍包含html标签

解决方法

方法一：使用TinyMCE的属性来限制

1. 确认TinyMCE的配置是否允许HTML标签。默认情况下，TinyMCE会过滤或转义某些HTML标签来防止XSS攻击。如果你需要允许某些标签，可以在初始化TinyMCE时设置valid_elements和extended_valid_elements选项。

tinymce.init({
  ...
  valid_elements: 'p,a[href|target],br,img[src|alt],iframe[src],div',
  extended_valid_elements: 'span[class|style]',
  ...
});

2. 如果你需要完全关闭HTML转义，可以设置entity_encoding选项为'raw'。

tinymce.init({
  ...
  entity_encoding: 'raw',
  ...
});

tips：以上方法是我在网上找的一种解决方法，但我配置后没有生效，无语死了！！！

所以我另辟蹊径 以下是我个人试验过且成功的方法

方法二

解决思路：

1. 获取TinyMCE富文本的纯文本内容（html没有被转义）
2. 判断纯文本本内容中是否包含html标签，如果含有就直接取纯文本内容，否则取正常的内容

//判断数据中的HTML标签方法
containsHTML(str) {
    return /<[^>]*>/.test(str);
},

save(){
    let content = tinyMCE.activeEditor.getContent() ////获取TinyMCE富文本内容
    let textContent = tinyMCE.activeEditor.getContent({ format: 'text' }) //获取TinyMCE富文本的纯文本内容
    let params = {
        content: this.containsHTML(textContent)?textContent:content,
    }
    ....
}

实现的效果：

TinyMCE富文本中写入html内容后能识别html标签和样式 保存前：

保存后：

tips：以下是网上找的如何获取TinyMCE富文本的内容方法

1、如果当前页面只有一个编辑器： 
获取内容：tinyMCE.activeEditor.getContent() 
设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）： 
获取内容：tinyMCE.editors[0].getContent() 
设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

3、获取不带HTML标记（指不带富文本默认的HTML标签）的纯文本内容： 
获取内容：tinyMCE.activeEditor.getContent( { ‘format’ : ‘text’ } );

最后记录一下如何将转义符反转成html

//转意符转换成html
escape2Html(str) { 
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body.textContent || "";
},