ckeditor一鍵排版功能實現(xiàn)方法分析
更新時間：2020年02月06日 11:27:32 作者：李瓊濤
這篇文章主要介紹了ckeditor一鍵排版功能實現(xiàn)方法,結(jié)合實例形式分析了ckeditor一鍵排版相關(guān)擴(kuò)展插件定義、配置與使用方法,需要的朋友可以參考下
本文實例講述了ckeditor一鍵排版功能實現(xiàn)方法。分享給大家供大家參考，具體如下：
參考：
http://www.dbjr.com.cn/article/179679.htm
<script src="https://cdn.jsdelivr.net/npm/ckeditor-full@4.7.3/ckeditor.js"></script>
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; //暫時無法實現(xiàn)局部格式化
if (!isPart) {
var tmpDiv = document.createElement("DIV");
var editorhtml = myeditor.getData();
editorhtml = editorhtml.replace(
/<div style="page-break-after: always;?">\s*<span style="display: none;?"> <\/span>\s*<\/div>/gi,
"<p>[ page]</p>"
); //將div span標(biāo)簽替換為p 標(biāo)簽
tmpDiv.innerHTML = editorhtml
.replace(/ /gi, "")
.replace(/<div/gi, "<p")
.replace(/<\/div/gi, "</p"); //移除空格標(biāo)簽，div替換為p標(biāo)簽。
if (
window.navigator.userAgent.toLowerCase().indexOf("msie") > 0
) {
tmpDiv.innerHTML = tmpDiv.innerHTML.replace(
/<\/p>/gi,
"<br /></p>"
); //每個段落相隔一行
}
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(
/<p>\[ page\]<\/p>/gi,
'<div style="page-break-after: always;"><span style="display: none;"> </span></div>'
); //p標(biāo)簽替換回原來的div和span標(biāo)簽。
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 =
'<p align="center">' + tempobject[j] + "</p>";
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 =
'<p align="center"><img src="' +
tempimg[j].src +
'" alt="' +
tempimg[j].alt +
'"' +
imgwidth +
" " +
imgheight +
' align="' +
tempimg[j].align +
'" border="0"></p>';
html = html.replace("#FormatImgID_" + j + "#", imghtml);
}
}
for (var i = 0; i < strongcount; i++) {
html = html.replace(
"#FormatStrongID_" + i + "#",
"<p><strong>" + strongarray[i] + "</strong></p>"
);
}
while (html.indexOf("</p></p>") != -1)
html = html.replace("</p></p>", "</p>");
while (html.indexOf('<p><p align="center">') != -1)
html = html.replace(
'<p><p align="center">',
'<p align="center">'
);
editor.setData(html);
} else {
}
} else {
alert("必須在設(shè)計模式下操作！");
}
}
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 += '<p align="center">' + tmp + "</p>\n";
} else {
html += "<p style='text-indent:2em;'>" + tmp + "</p>\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, "");
};
})();
希望本文所述對大家CKEDitor富文本編輯器開發(fā)有所幫助。
相關(guān)文章
這篇文章主要介紹了詳解webpack模塊化管理和打包工具,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
使用JavaScript實現(xiàn)響應(yīng)式計數(shù)器動畫
在本文中，我們將學(xué)習(xí)如何使用?HTML?CSS?和?JavaScript創(chuàng)建響應(yīng)式計數(shù)器動畫。?我們在很多地方都可以用，比如適用于不同類型的個人網(wǎng)站、企業(yè)網(wǎng)站等，感興趣的可以了解一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)評論功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JS前端千萬級彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
這篇文章主要為大家介紹了JS前端一千萬條彈幕數(shù)據(jù)循環(huán)優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了關(guān)于Javascript中引用類型傳遞的知識點，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
本文章為你提供一款js 返回變量的類型代碼哦，如果你不懂得如何獲取js變量的類型的話，看看我們下面的代碼你就知道如何獲取js變量的代碼哦。2010-07-07
gridview生成時如何去掉style屬性中的border-collapse
默認(rèn)gridview控件會在生成的html代碼中的style屬性中加入border-collapse:collapse，如果想把它去掉的話2014-09-09
javascript實現(xiàn)rgb顏色轉(zhuǎn)換成16進(jìn)制格式
本文給大家分享的是使用javascript實現(xiàn)rgb顏色轉(zhuǎn)換成16進(jìn)制格式的方法和示例代碼，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了bootstrap datepicker的基本使用教程,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
use jscript List Installed Software
use jscript List Installed Software...2007-06-06