這篇文章給大家介紹使用ckeditor怎么實(shí)現(xiàn)一個(gè)一鍵排版功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
方城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
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; //暫時(shí)無法實(shí)現(xiàn)局部格式化
if (!isPart) {
var tmpDiv = document.createElement("DIV");
var editorhtml = myeditor.getData();
editorhtml = editorhtml.replace(
/\s* <\/span>\s*<\/div>/gi,
"[ page]
"
); //將div span標(biāo)簽替換為p 標(biāo)簽
tmpDiv.innerHTML = editorhtml
.replace(/ /gi, "")
.replace(/ 0
) {
tmpDiv.innerHTML = tmpDiv.innerHTML.replace(
/<\/p>/gi,
"
"
); //每個(gè)段落相隔一行
}
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("必須在設(shè)計(jì)模式下操作！");
}
}
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”是“，”。不轉(zhuǎn)換"，"
if (
code >= 65281 &&
code < 65373 &&
code != 65292 &&
code != 65306
) {
// “65248”是轉(zhuǎn)換碼距
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, "");
};
})();關(guān)于使用ckeditor怎么實(shí)現(xiàn)一個(gè)一鍵排版功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
名稱欄目：使用ckeditor怎么實(shí)現(xiàn)一個(gè)一鍵排版功能
當(dāng)前網(wǎng)址：
http://weahome.cn/article/gioheo.html
重慶分公司
重慶分公司
