UEditor 编辑器使用

最新推荐文章于 2024-08-27 11:48:58 发布

原创最新推荐文章于 2024-08-27 11:48:58 发布 · 898 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

html/css/javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了针对UEditor编辑器的多项改进措施，包括解决空div过滤、div转p标签、默认内容设置、标签替换等问题，并调整了xss过滤规则及内容自动处理逻辑。

1、解决进入UEditor编辑器的空div被过滤

在 ueditor.all.js 的 6984 行删除 //geckoSel.removeAllRanges()

2、解决UEditor内容div转换成p标签

在 ueditor.config.js 的 356 行修改 allowDivTransToP:true 为 allowDivTransToP:false

在 ueditor.all.ja 的 9970 行将 'allowDivTransToP':true, 改为 'allowDivTransToP':false,

3、解决进行编辑器默认内容

在ueditor.all.js 的7015 行把编辑器内容不能为空注释

//编辑器不能为空内容
 // if (domUtils.isEmptyNode(me.body)) {
 // me.body.innerHTML = '' + (browser.ie ? '' : ' ') + '';

// }

4、解决style、script等标签被替换

在ueditor.all.js 的 9948 行添加 return；

UE.plugins['defaultfilter'] = function () {
return; // 添加的代码

var me = this;

5、解决ueditor自动给 ul 添加样式

在 ueditor.all.ja 的 15284 行 function adjustListStyle(doc,ignore) 将方法里的代码全部注释

//utils.each(domUtils.getElementsByTagName(doc,'ol ul'),function(node){

 // if(!domUtils.inDoc(node,doc))
 // return;

 // var parent = node.parentNode;
 // if(parent.tagName == node.tagName){
 // var nodeStyleType = getStyle(node) || (node.tagName == 'OL' ? 'decimal' : 'disc'),
 // parentStyleType = getStyle(parent) || (parent.tagName == 'OL' ? 'decimal' : 'disc');
 // if(nodeStyleType == parentStyleType){
 // var styleIndex = utils.indexOf(listStyle[node.tagName], nodeStyleType);
 // styleIndex = styleIndex + 1 == listStyle[node.tagName].length ? 0 : styleIndex + 1;
 // setListStyle(node,listStyle[node.tagName][styleIndex])
 // }

 // }
 // var index = 0,type = 2;
 // if( domUtils.hasClass(node,/custom_/)){
 // if(!(/[ou]l/i.test(parent.tagName) && domUtils.hasClass(parent,/custom_/))){
 // type = 1;
 // }
 // }else{
 // if(/[ou]l/i.test(parent.tagName) && domUtils.hasClass(parent,/custom_/)){
 // type = 3;
 // }
 // }

 // var style = domUtils.getStyle(node, 'list-style-type');
 // style && (node.style.cssText = 'list-style-type:' + style);
 // node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;
 // utils.each(domUtils.getElementsByTagName(node,'li'),function(li){
 // li.style.cssText && (li.style.cssText = '');
 // if(!li.firstChild){
 // domUtils.remove(li);
 // return;
 // }
 // if(li.parentNode !== node){
 // return;
 // }
 // index++;
 // if(domUtils.hasClass(node,/custom_/) ){
 // var paddingLeft = 1,currentStyle = getStyle(node);
 // if(node.tagName == 'OL'){
 // if(currentStyle){
 // switch(currentStyle){
 // case 'cn' :
 // case 'cn1':
 // case 'cn2':
 // if(index > 10 && (index % 10 == 0 || index > 10 && index < 20)){
 // paddingLeft = 2
 // }else if(index > 20){
 // paddingLeft = 3
 // }
 // break;
 // case 'num2' :
 // if(index > 9){
 // paddingLeft = 2
 // }
 // }
 // }
 // li.className = 'list-'+customStyle[currentStyle]+ index + ' ' + 'list-'+currentStyle+'-paddingleft-' + paddingLeft;
 // }else{
 // li.className = 'list-'+customStyle[currentStyle] + ' ' + 'list-'+currentStyle+'-paddingleft';
 // }
 // }else{
 // li.className = li.className.replace(/list-[\w\-]+/gi,'');
 // }
 // var className = li.getAttribute('class');
 // if(className !== null && !className.replace(/\s/g,'')){
 // domUtils.removeAttributes(li,'class')
 // }
 // });
 // !ignore && adjustList(node,node.tagName.toLowerCase(),getStyle(node)||domUtils.getStyle(node, 'list-style-type'),true);
 // })/

6、解决ueditor自动给 li 添加 p 标签

在 ueditor.all.js 的15159 行将下面代码注释

// utils.each(root.getNodesByTagName('li'),function(li){
 // var tmpP = UE.uNode.createElement('p');
 // for(var i= 0,ci;ci=li.children[i];){
 // if(ci.type == 'text' || dtd.p[ci.tagName]){
 // tmpP.appendChild(ci);
 // }else{
 // if(tmpP.firstChild()){
 // li.insertBefore(tmpP,ci);
 // tmpP = UE.uNode.createElement('p');
 // i = i + 2;
 // }else{
 // i++;
 // }

 // }
 // }
 // if(tmpP.firstChild() && !tmpP.parentNode || !li.firstChild()){
 // li.appendChild(tmpP);
 // }
 // //trace:3357
 // //p不能为空
 // if (!tmpP.firstChild()) {
 // tmpP.innerHTML(browser.ie ? ' ' : ' ')
 // }
 // //去掉末尾的空白
 // var p = li.firstChild();
 // var lastChild = p.lastChild();
 // if(lastChild && lastChild.type == 'text' && /^\s*$/.test(lastChild.data)){
 // p.removeChild(lastChild)
 // }

// });

7、修改 ueditor.config.js 中的 358-363行

        // xss 过滤是否开启,inserthtml等操作
       ,xssFilterRules: false
       //input xss过滤
       ,inputXssFilter: false
       //output xss过滤

,outputXssFilter: false

8、修改 ueditor.config.js 中的 305-308 行

    ,autotypeset: {
            mergeEmptyline: false,           //合并空行
            removeClass: false,              //去掉冗余的class

removeEmptyline: false //去掉空行

9、在ueditor.all.js 的9967行可搜索 UE.plugins['defaultfilter'] 添加return代码；不就行内容处理

UE.plugins['defaultfilter'] = function () {

return;var me = this;

10、处理 ueditor 自动将空格转换成 

    function isText(node, arr) {
        if(node.parentNode.tagName == 'pre'){
            //源码模式下输入html标签，不能做转换处理，直接输出
            arr.push(node.data)
        }else{
            arr.push(
                notTransTagName[node.parentNode.tagName] ? utils.html(node.data) : node.data.replace(/[ ]{2}/g,''))
        }

}

修改成

function isText(node, arr) {
        if(node.parentNode.tagName == 'pre'){
            //源码模式下输入html标签，不能做转换处理，直接输出
            arr.push(node.data)
        }else{
            arr.push(utils.html(node.data))
        }

}

11、在ueditor.all.js 的 10100行解决dt dd 变成 ul li 注释掉如下代码

// case 'dl':
//     node.tagName = 'ul';
//     break;
// case 'dt':
// case 'dd':
//     node.tagName = 'li';
//     break;