这篇文章给大家介绍使用ckeditor怎么实现一个一键排版功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
方城网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
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* <\/span>\s*<\/div>/gi,
"[ page]
"
); //将div span标签替换为p 标签
tmpDiv.innerHTML = editorhtml
.replace(/ /gi, "")
.replace(/ 0
) {
tmpDiv.innerHTML = tmpDiv.innerHTML.replace(
/<\/p>/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\]<\/p>/gi,
'
" + 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怎么实现一个一键排版功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网页名称：使用ckeditor怎么实现一个一键排版功能
文章位置：
http://cdkjz.cn/article/gioheo.html
