本文实例讲述了ckeditor一键排版功能实现方法。分享给大家供大家参考，具体如下：
参考：
http://cdn.ckeditor.com/
https://www.jb51.net/article/179679.htm
CKEDITOR.plugins.addExternal('autoformat', '/static/ckeditor/myplugins/autoformat/', 'plugin.js');
var editor = 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);
}
}
}
};
//格式化
function formatText(editor) {
var myeditor = editor;
if (myeditor.mode == "wysiwyg") {
var tempimg = new Array();
var temptable = new Array();
var tempobject = new Array();
var isPart = false; //暂时无法实现局部格式化
if (!isPart) {
var tmpDiv = document.createElement("DIV");
var editorhtml = myeditor.getData();
editorhtml = editorhtml.replace(
/s* s*/gi,
"
[ page]
"
); //将div span标签替换为p 标签
tmpDiv.innerHTML = editorhtml
.replace(/ /gi, "")
.replace(/ 0
) {
tmpDiv.innerHTML = tmpDiv.innerHTML.replace(
//gi,
"
"
); //每个段落相隔一行
}
var tables = tmpDiv.getElementsByTagName("TABLE");
if (tables != null && tables.length > 0) {
for (var j = 0; j < tables.length; j++) {
temptable[temptable.length] = tables[j].outerHTML;
}
var formattableCount = 0;
for (var j = 0; j < tables.length; ) {
tables[j].outerHTML =
"#FormatTableID_" + formattableCount + "#";
formattableCount++;
}
}
var objects = tmpDiv.getElementsByTagName("OBJECT");
if (objects != null && objects.length > 0) {
for (var j = 0; j < objects.length; j++) {
tempobject[tempobject.length] = objects[j].outerHTML;
}
var formatobjectCount = 0;
for (var j = 0; j < objects.length; ) {
objects[j].outerHTML =
"#FormatObjectID_" + formatobjectCount + "#";
formatobjectCount++;
}
}
var imgs = tmpDiv.getElementsByTagName("IMG");
if (imgs != null && imgs.length > 0) {
for (var j = 0; j < imgs.length; j++) {
var t = document.createElement("IMG");
t.alt = imgs[j].alt;
t.src = imgs[j].src;
t.width = imgs[j].width;
t.height = imgs[j].height;
t.align = imgs[j].align;
tempimg[tempimg.length] = t;
}
var formatImgCount = 0;
for (var j = 0; j < imgs.length; ) {
imgs[j].outerHTML =
"#FormatImgID_" + formatImgCount + "#";
formatImgCount++;
}
}
var strongarray = new Array();
var strongcount = 0;
for (
var i = 0;
i < tmpDiv.getElementsByTagName("b").length;
i++
) {
strongarray[strongcount] = tmpDiv
.getElementsByTagName("b")
[i].innerText.trim();
tmpDiv.getElementsByTagName("b")[i].innerHTML =
"#FormatStrongID_" + strongcount + "#";
strongcount++;
}
for (
var i = 0;
i < tmpDiv.getElementsByTagName("strong").length;
i++
) {
strongarray[strongcount] = tmpDiv
.getElementsByTagName("strong")
[i].innerText.trim();
tmpDiv.getElementsByTagName("strong")[i].innerHTML =
"#FormatStrongID_" + strongcount + "#";
strongcount++;
}
var html = processFormatText(tmpDiv.innerText);
html = html.replace(
/
[ page]
/gi,
' '
); //p标签替换回原来的div和span标签。
if (temptable != null && temptable.length > 0) {
for (var j = 0; j < temptable.length; j++) {
var tablehtml = temptable[j];
html = html.replace(
"#FormatTableID_" + j + "#",
tablehtml
);
}
}
if (tempobject != null && tempobject.length > 0) {
for (var j = 0; j < tempobject.length; j++) {
var objecthtml =
'
' + tempobject[j] + "
";
html = html.replace(
"#FormatObjectID_" + j + "#",
objecthtml
);
}
}
if (tempimg != null && tempimg.length > 0) {
for (var j = 0; j < tempimg.length; j++) {
var imgheight = "";
var imgwidth = "";
if (tempimg[j].height != 0)
imgheight = ' height="' + tempimg[j].height + '"';
if (tempimg[j].width != 0)
imgwidth = ' width="' + tempimg[j].width + '"';
var imgalign = "";
if (tempimg[j].align != "")
imgalign = ' align="' + tempimg[j].align + '"';
var imghtml =
'
';
html = html.replace("#FormatImgID_" + j + "#", imghtml);
}
}
for (var i = 0; i < strongcount; i++) {
html = html.replace(
"#FormatStrongID_" + i + "#",
"
" + strongarray[i] + "
"
);
}
while (html.indexOf("") != -1)
html = html.replace("", "");
while (html.indexOf('
') != -1)
html = html.replace(
'
',
'
'
);
editor.setData(html);
} else {
}
} else {
alert("必须在设计模式下操作！");
}
}
function processFormatText(textContext) {
var text = dbc2Sbc(textContext);
var prefix = "";
var tmps = text.split("n");
var html = "";
for (var i = 0; i < tmps.length; i++) {
var tmp = tmps[i].trim();
if (tmp.length > 0) {
var reg = /#Format[A-Za-z]+_d+#/gi;
var f = 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";
}
}
}
return html;
}
function dbc2Sbc(str) {
var result = "";
for (var i = 0; i < str.length; i++) {
var code = str.charCodeAt(i);
// “65281”是“！”，“65373”是“｝”，“65292”是“，”。不转换"，"
if (
code >= 65281 &&
code < 65373 &&
code != 65292 &&
code != 65306
) {
// “65248”是转换码距
result += String.fromCharCode(str.charCodeAt(i) - 65248);
} else {
result += str.charAt(i);
}
}
return result;
}
String.prototype.trim = function() {
return this.replace(/(^[s ]*)|([s ]*$)/g, "");
};
String.prototype.leftTrim = function() {
return this.replace(/(^s*)/g, "");
};
String.prototype.rightTrim = function() {
return this.replace(/(s*$)/g, "");
};
})();
希望本文所述对大家CKEDitor富文本编辑器开发有所帮助。
