ueditor插入自定义内容和样式

偏执的太偏执、 2021-06-26 16:06 619阅读 0赞

`UEditor`是由百度`web`前端研发部开发所见即所得富文本`web`编辑器，具有轻量，可定制，注重用户体验等特点

通过`UEditor`提供的`API`接口可以很方便的读写操作内容并设置编辑器里的样式

页面中的脚本

`\js\ueditor\themes\iframe.css` 自定义编辑器里的样式

/*可以在这里添加你自己的css*/
    .content { 
        padding: 20px;
        background: #f6f6f6;
    }
    .content img { 
        width: 98%;
    }

--------------------

## 关于`ueditor1.4.3`版复制`section`标签丢失`class`和`style`样式问题 ##

在复制微信的文章格式到`ueditor`时发现`section`标签中的`style`和`class`属性丢失，严重影响美观。

原文格式，排版清晰段落分明赏心悦目：  
![在这里插入图片描述][2019071316531842.png]复制到`ueditor`后的格式。。。这跟原文是没法比了  
![在这里插入图片描述][20190713165347941.png]  
于是打开代码模式，发现section的属性全没了  
![在这里插入图片描述][20190713165408215.png]但是请注意，`span`的属性还是有的，猜测`ueditor`有可能某种规则限制了标签的属性复制。

果不其然，经过`chrome`的一番调试后，发现`ueditor`中有`xss`过滤器，默认启用，按照配置文件中的白名单列表，不在其中的将去除。  
![在这里插入图片描述][20190713165511198.png]  
找到`section`那项，把`class`和`style`加入白名单

section:['class', 'style'],

效果果然出来了  
![在这里插入图片描述][20190713171305633.png]

## `ueditor`编辑器显示`style`标签样式 ##

在使用`ueditor`编辑器中，想保存`style`标签的样式需要对`js`配置文件进行修改。官方为了安全考虑，默认会将`style`标签转为`DIV`标签，导致样式不能显示出对应的效果。

基于1.4.3版本修改如下

### 1.找到`ueditor.config.js`文件 ###

// 将下面3个参数值改为false
    
    // xss 过滤是否开启,inserthtml等操作
    ,xssFilterRules: false
    
    //input xss过滤
    ,inputXssFilter: false
    
    //output xss过滤
    ,outputXssFilter: false

2.确定页面引入的是 `ueditor.all.min.js` 还是 `ueditor.all.js` ，并修改：

// 找到allowDivTransToP参数，这个参数会将DIV标签转为P标签，设置为false
     me.setOpt(
    　　{  
    　　　　'allowDivTransToP':false, 
    　　　　'disabledTableInTable':true 
    　　}
    );

// 找到addInputRule方法，并将switch case 中的case style：删除
    me.addInputRule(function (root) { 
            ...
            //进行默认的处理
            root.traversal(function (node) { 
                if (node.type == 'element') { 
                   ...
                    switch (node.tagName) { 
                        case 'style': // 删除这项
                        case 'script':
                        ....
                    }
                }
            }
        })

1.  刷新文件，重新设置即可

[2019071316531842.png]: /images/20210626/24cab4c932b64e7fba29bfccfff6375a.png
[20190713165347941.png]: /images/20210626/3f1510f89efc492fbba37e276158e6ad.png
[20190713165408215.png]: /images/20210626/595a09f5ee1c43e1bd69df052d3a6b45.png
[20190713165511198.png]: /images/20210626/c4921e8edea744bf88fa85f9ace8f117.png
[20190713171305633.png]: /images/20210626/9d172caa11b646f5abbe6bf4fd071755.png