解决百度编辑器Ueditor3.0.0的div,dl,dt,dd过滤替换掉导致页面错乱问题
发表日期:2023-08-25 13:03:42   文章编辑:超级管理员    浏览次数:40
 

做网站设计中,我们有时把前端页面用css等代码写得好好点,然后加到ueditor编辑器中进行发布后,是正常的,但是回过头来再进行修改时,发现有些标签代码如:div,dl,dt,dd等被过滤掉了,想保持style标签的样式,需要对百度js配置文件进行修改。百度官方为了保证安全考虑,默认会将style标签转为DIV标签,导致样式不能显示出而出现错乱效果。

本修改基于百度UEditor Plus 3.0.0版本修改如下

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 ,并修改:

1、 找到allowDivTransToP参数,这个参数会将DIV标签转为P标签,设置为false

me.setOpt(

  {

    'allowDivTransToP':false,

    'disabledTableInTable':true

  }

);

2、 找到addInputRule方法,并将switch case 中的case style:删除或注释

switch (node.tagName) {

// case 'style':

// case 'script':

// node.setAttr({

// cdata_tag: node.tagName,

// cdata_data: (node.innerHTML() || ''),

// '_ue_custom_node_':'true'

// });

// node.tagName = 'div';

// node.innerHTML('');

// break;

case 'a':

if (val = node.getAttr('href')) {

node.setAttr('_href', val)

}

break;

3、搜索 node.tagName = ‘ul’; 把如下几行注释

if (p.firstChild()) {

node.parentNode.insertBefore(p, node);

}

node.parentNode.removeChild(node);

break;

// case 'dl':

// node.tagName = 'ul';

// break;

// case 'dt':

// case 'dd':

// node.tagName = 'li';

// break;

case 'li':

var className = node.getAttr('class');

if (!className || !/list-/.test(className)) {

node.setAttr()

}

var tmpNodes = node.getNodesByTagName('ol ul');

UE.utils.each(tmpNodes, function (n) {

node.parentNode.insertAfter(n, node);

});

4.ctrl+f5清除浏览器缓存,刷新网站。

最后重新添加前台代码,然后进行修改,发现代码没过滤掉,发布文章内容后也显示正常了。


如没特殊注明,文章均为宜兴博路网络原创,转载请注明来自https://www.boroad.net/news/wangzhansheji/400.html