CKEditor扩展插件：自动排版功能autoformat插件实现方法详解
本文实例讲述了CKEditor扩展插件：自动排版功能autoformat插件实现方法。分享给大家供大家参考，具体如下：
1.注册插件
首先找到根目录下的ckeditor/config.js文件，打开文件如下：
CKEDITOR.editorConfig=function(config){
//Definechangestodefaultconfigurationhere.Forexample:
//config.language='fr';
//config.uiColor='#AADC6E';
};
我们需要将我们的插件注册进CKEDITOR中。
在方法内部加入如下代码：
config.extraPlugins="autoformart";
如果值中有其他字符,则用","逗号分隔,增加.
2.创建Plugin.js文件
在Plugins文件下新建一个与插件名相同的文件夹：aotuformart的文件夹，意为自动排版。
再在文件夹内创建一个plugin.js文件，因为在注册插件后，首先加载和执行的就是plugin.js这个文件。
首先我们构建一个自执行函数，在自执行函数中添加一个插件：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
//初始化操作
}
});
})();
添加一个命令和按钮在初始化函数中，如下：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
editor.addCommand('autoformat',newCKEDITOR.autoformatCommand());
editor.ui.addButton('Autoformat',{label:'自动排版',command:'autoformat',icon:CKEDITOR.getUrl(this.path+'images/autoformat.png')});
}
});
})();
addCommand方法有两个参数：插件命令名称，第二个是命令执行的方法。
addButton方法的第一个参数是：插件的按钮名称
label：鼠标悬浮时插件提示
command：执行插件命令的名称
icon：插件图标
所有代码(上边的两块代码为演示注册插件)
//一键排版
(function(){
CKEDITOR.plugins.add('autoformat',{
requires:['styles','button'],
init:function(a){
a.addCommand('autoformat',CKEDITOR.plugins.autoformat.commands.autoformat);
a.ui.addButton('autoformat',{
label:"一键排版",
command:'autoformat',
icon:this.path+"images/autoformat.png"
});
}
});
CKEDITOR.plugins.autoformat={
commands:{
autoformat:{
exec:function(editor){
formatText(editor);
}
}
}
};
//格式化
functionformatText(editor){
varmyeditor=editor;
if(myeditor.mode=="wysiwyg"){
vartempimg=newArray();
vartemptable=newArray();
vartempobject=newArray();
varisPart=false;//暂时无法实现局部格式化
if(!isPart){
vartmpDiv=document.createElement("DIV");
vareditorhtml=myeditor.getData();
editorhtml=editorhtml.replace(/\s* <\/span>\s*<\/div>/gi,'[page]
');//将divspan标签替换为p标签
tmpDiv.innerHTML=editorhtml.replace(/ /gi,'').replace(/0){
tmpDiv.innerHTML=tmpDiv.innerHTML.replace(/<\/p>/gi,'
<\/p>');//每个段落相隔一行
}
vartables=tmpDiv.getElementsByTagName("TABLE");
if(tables!=null&&tables.length>0){
for(varj=0;j0){
for(varj=0;j0){
for(varj=0;j\[page\]<\/p>/gi,' ');//p标签替换回原来的div和span标签。
if(temptable!=null&&temptable.length>0){
for(varj=0;j0){
for(varj=0;j"+tempobject[j]+"";
html=html.replace("#FormatObjectID_"+j+"#",objecthtml);
}
}
if(tempimg!=null&&tempimg.length>0){
for(varj=0;j";
html=html.replace("#FormatImgID_"+j+"#",imghtml);
}
}
for(vari=0;i"+strongarray[i]+"");
}
while(html.indexOf("")!=-1)html=html.replace("","");
while(html.indexOf('')!=-1)html=html.replace('','');
editor.setData(html);
}else{
}
}else{
alert('必须在设计模式下操作！');
}
}
functionprocessFormatText(textContext){
vartext=dbc2Sbc(textContext);
varprefix="";
vartmps=text.split("\n");
varhtml="";
for(vari=0;i0){
varreg=/#Format[A-Za-z]+_\d+#/gi;
varf=reg.exec(tmp);
if(f!=null){
tmp=tmp.replace(/#Format[A-Za-z]+_\d+#/gi,'');
html+=f;
if(tmp!="")
html+=""+tmp+"
\n";
}else{
html+=""+tmp+"
\n";
}
}
}
returnhtml;
}
functiondbc2Sbc(str){
varresult='';
for(vari=0;i=65281&&code<65373&&code!=65292&&code!=65306){
//“65248”是转换码距
result+=String.fromCharCode(str.charCodeAt(i)-65248);
}else{
result+=str.charAt(i);
}
}
returnresult;
}
String.prototype.trim=function(){
returnthis.replace(/(^[\s]*)|([\s]*$)/g,"");
};
String.prototype.leftTrim=function(){
returnthis.replace(/(^\s*)/g,"");
};
String.prototype.rightTrim=function(){
returnthis.replace(/(\s*$)/g,"");
};
})();
3、配置到菜单中
例basic模式：
['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink'],['Maximize']
改为
['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink'],['Maximize','autoformat']
4、图标
当前占位已经实现，但由于没有图标，显示上会有问题，此时自己找或制作一个图标，放到autoformat/images/下命名为autoformat.png
借用某编辑器的：
如未生效，记得清除cookie或更换浏览器查看显示效果。
5、效果对比
希望本文所述对大家CKEDitor富文本编辑器开发有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。