ckeditor一键排版功能实现方法分析

2023-08-02 01:17:04 64

本文实例讲述了ckeditor一键排版功能实现方法。分享给大家供大家参考，具体如下：

参考：

http://cdn.ckeditor.com/

https://www.nhooo.com/article/179679.htm



CKEDITOR.plugins.addExternal('autoformat','/static/ckeditor/myplugins/autoformat/','plugin.js');
vareditor=CKEDITOR.replace(this.$el,{
customConfig:'/static/ckeditor/config.js',
extraPlugins:'autoformat'
});

config.js

CKEDITOR.editorConfig=function(config){
config.extraPlugins="autoformart";
};

plugin.js

(function(){
CKEDITOR.plugins.add("autoformat",{
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,
"
"
);//每个段落相隔一行
}
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";
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,"");
};
})();

希望本文所述对大家CKEDitor富文本编辑器开发有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

ckeditor一键排版功能实现方法分析

热门推荐

随机推荐