您的位置:首页 > 产品设计 > UI/UE

ueditor1.4.3.1版本二次开发记录

2015-10-10 10:44 218 查看
最近项目需要拿ueditor做一些个性化功能,在此特意把修改的内容记录在这,一来方便自己知道改动过的地方,二来也是希望后来者如何需要做到类似的功能可以直接拿去用了。

1.去除复制粘贴内容中的图片、段落所包含的样式及类名

在ueditor.config.js中找到“filterTxtRules”配置,并修改为以下代码

filterTxtRules : function(){
function transP(node){
node.tagName = 'p';
node.attrs=''; //清空所有属性
node.setStyle();
}
return {
//直接删除及其字节点内容
'-' : 'script style object iframe embed input select',
'p': function(node){
node.attrs=''; //清空粘贴内容中p元素所带的属性
},
'img':function(node){
node.attrs['class']='';//清除class属性,此处不能使用node.attrs.class='',在ie8下报错,因为class是关键字
node.attrs['style']='';//清除style属性
node.setStyle();
},
'br':{'$':{}},
'div':{'$':{}},
'li':{'$':{}},
'caption':transP,
'th':transP,
'tr':transP,
'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP,
'td':function(node){
//没有内容的td直接删掉
var txt = !!node.innerText();
if(txt){
node.parentNode.insertAfter(UE.uNode.createText('    '),node);
}
node.parentNode.removeChild(node,node.innerText())
}
}
}()


2.选中图片时段落居中等操作按钮灰色不可点

这个功能需要修改到ueditor源码,所以需要你下载的是完整源码版本,然后找到"_src/adapter/editorui.js"这个文件并定位到" //排版,图片排版,文字方向"这里,如截图



修改代码如下:

//排版,图片排版,文字方向
var typeset = {
'justify':['left', 'right', 'center', 'justify'],
'imagefloat':['none', 'left', 'center', 'right'],
'directionality':['ltr', 'rtl']
};

for (var p in typeset) {

(function (cmd, val) {
var uilist = [];
for (var i = 0, ci; ci = val[i++];) {
(function (cmd2) {
editorui[cmd.replace('float', '') + cmd2] = function (editor) {
var ui = new editorui.Button({
className:'edui-for-' + cmd.replace('float', '') + cmd2,
title:editor.options.labelMap[cmd.replace('float', '') + cmd2] || editor.getLang("labelMap." + cmd.replace('float', '') + cmd2) || '',
theme:editor.options.theme,
onclick:function () {
editor.execCommand(cmd, cmd2);
}
});
uilist.push(ui);
editorui.buttons[cmd] = ui;
editor.addListener('selectionchange', function (type, causeByUi, uiReady) {
var range = this.selection.getRange(),
startNode;
startNode = range.getClosedNode();
if (startNode && startNode.nodeType == 1 && startNode.tagName == 'IMG') {
if(/image/g.test(ui.className)){
ui.setDisabled(editor.queryCommandState(cmd) == -1);
ui.setChecked(editor.queryCommandValue(cmd) == cmd2 && !uiReady);
}else{
ui.setDisabled(true);
}

}else{
ui.setDisabled(editor.queryCommandState(cmd) == -1);
ui.setChecked(editor.queryCommandValue(cmd) == cmd2 && !uiReady);
}

});
return ui;
};
})(ci)
}
})(p, typeset[p])
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: