CKEditor擴展插件：自動排版功能autoformat插件實現(xiàn)方法詳解
更新時間：2020年02月06日 11:07:05 作者：劉博的
這篇文章主要介紹了CKEditor擴展插件：自動排版功能autoformat插件實現(xiàn)方法,結(jié)合實例形式詳細分析了CKEditor擴展插件實現(xiàn)自動排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下
本文實例講述了CKEditor擴展插件：自動排版功能autoformat插件實現(xiàn)方法。分享給大家供大家參考，具體如下：
1.注冊插件
首先找到根目錄下的ckeditor/config.js文件，打開文件如下：
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
我們需要將我們的插件注冊進CKEDITOR中。
在方法內(nèi)部加入如下代碼：
config.extraPlugins = "autoformart";
如果值中有其他字符,則用","逗號分隔,增加.
2.創(chuàng)建Plugin.js文件
在Plugins文件下新建一個與插件名相同的文件夾：aotuformart 的文件夾，意為自動排版。
再在文件夾內(nèi)創(chuàng)建一個plugin.js文件，因為在注冊插件后，首先加載和執(zhí)行的就是plugin.js這個文件。
首先我們構建一個自執(zhí)行函數(shù)，在自執(zhí)行函數(shù)中添加一個插件：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
//初始化操作
}
});
})();
添加一個命令和按鈕在初始化函數(shù)中，如下：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
editor.addCommand( 'autoformat', new CKEDITOR.autoformatCommand());
editor.ui.addButton('Autoformat',{label:'自動排版',command:'autoformat',icon:CKEDITOR.getUrl( this.path + 'images/autoformat.png' )});
}
});
})();
addCommand方法有兩個參數(shù)：插件命令名稱，第二個是命令執(zhí)行的方法。
addButton方法的第一個參數(shù)是：插件的按鈕名稱
label：鼠標懸浮時插件提示
command：執(zhí)行插件命令的名稱
icon：插件圖標
所有代碼(上邊的兩塊代碼為演示注冊插件)
//一鍵排版
(function () {
CKEDITOR.plugins.add('autoformat', {
requires: ['styles', 'button'],
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標簽替換為p 標簽
tmpDiv.innerHTML = editorhtml.replace(/ /gi, '').replace(/<div/gi, '<p').replace(/<\/div/gi, '</p'); //移除空格標簽，div替換為p標簽。
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標簽替換回原來的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 = "<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('必須在設計模式下操作！');
}
}
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, "");
};
})();
3、配置到菜單中
例basic模式：
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize']
改為
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize','autoformat']
4、圖標
當前占位已經(jīng)實現(xiàn)，但由于沒有圖標，顯示上會有問題，此時自己找或制作一個圖標，放到autoformat/images/下命名為autoformat.png
借用某編輯器的：
如未生效，記得清除cookie或更換瀏覽器查看顯示效果。
5、效果對比
希望本文所述對大家CKEDitor富文本編輯器開發(fā)有所幫助。
相關文章
八點改變div大小的實現(xiàn)代碼，代碼相對來說并不多，需要的朋友可以參考下。2010-02-02
下面小編就為大家?guī)硪黄狫avaScript操作選擇對象的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
本文主要介紹了js實現(xiàn)數(shù)組去重方法及效率對比。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript獲取客戶端計算機硬件及系統(tǒng)等信息的方法
本文為大家詳細介紹下如何使用JavaScript獲取客戶端計算機硬件及系統(tǒng)等信息，下面有個不錯的示例，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹JavaScript的三種this指向的方法：call()、bind()、apply()，文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-05-05
鼠標事件的移動及移出效果都可以使用js來自定義，下面有個示例，實，效果為當事件發(fā)生改變時背景顏色也隨著改變2014-10-10
Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實現(xiàn)
這篇文章主要介紹了Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
AJAX的應用較少了頁面的刷新次數(shù)，但是也可能會使瀏覽器的前進、后退、刷新等功能受到影響。2011-02-02
JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構的實現(xiàn)示例
本文主要介紹了JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
各種音樂播放器上都有一個自動滾動播放歌詞的功能，當前滾動到的歌詞會高亮居中顯示，即使歌詞被換行也能正常居中，那么這個功能基于JavaScript怎么實現(xiàn)讓歌詞滾動播放呢？感興趣的朋友一起看看吧2015-11-11