這篇文章將為大家詳細(xì)講解有關(guān)CKEditor擴(kuò)展插件：自動(dòng)排版功能autoformat插件怎么實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營(yíng)銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營(yíng)銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。
1.注冊(cè)插件
首先找到根目錄下的ckeditor/config.js文件，打開文件如下：
重慶分公司
重慶分公司
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};我們需要將我們的插件注冊(cè)進(jìn)CKEDITOR中。
在方法內(nèi)部加入如下代碼：
config.extraPlugins = "autoformart";
如果值中有其他字符,則用","逗號(hào)分隔,增加.
2.創(chuàng)建Plugin.js文件
在Plugins文件下新建一個(gè)與插件名相同的文件夾：aotuformart 的文件夾，意為自動(dòng)排版。
再在文件夾內(nèi)創(chuàng)建一個(gè)plugin.js文件，因?yàn)樵谧?cè)插件后，首先加載和執(zhí)行的就是plugin.js這個(gè)文件。
首先我們構(gòu)建一個(gè)自執(zhí)行函數(shù)，在自執(zhí)行函數(shù)中添加一個(gè)插件：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
//初始化操作
}
});
})();添加一個(gè)命令和按鈕在初始化函數(shù)中，如下：
(function()
{
CKEDITOR.plugins.add('autoformat',{
init:function(editor){
editor.addCommand( 'autoformat', new CKEDITOR.autoformatCommand());
editor.ui.addButton('Autoformat',{label:'自動(dòng)排版',command:'autoformat',icon:CKEDITOR.getUrl( this.path + 'images/autoformat.png' )});
}
});
})();addCommand方法有兩個(gè)參數(shù)：插件命令名稱，第二個(gè)是命令執(zhí)行的方法。
addButton方法的第一個(gè)參數(shù)是：插件的按鈕名稱
label：鼠標(biāo)懸浮時(shí)插件提示
command：執(zhí)行插件命令的名稱
icon：插件圖標(biāo)
所有代碼(上邊的兩塊代碼為演示注冊(cè)插件)
//一鍵排版
(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; //暫時(shí)無(wú)法實(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, '\[ page\]<\/p>/gi, '
'); //p標(biāo)簽替換回原來(lái)的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 = "" + 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('必須在設(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, "");
};
})(); 3、配置到菜單中
例basic模式：
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize']
改為
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize','autoformat']
4、圖標(biāo)
當(dāng)前占位已經(jīng)實(shí)現(xiàn)，但由于沒有圖標(biāo)，顯示上會(huì)有問題，此時(shí)自己找或制作一個(gè)圖標(biāo)，放到autoformat/images/下命名為autoformat.png
借用某編輯器的：
如未生效，記得清除cookie或更換瀏覽器查看顯示效果。
5、效果對(duì)比
關(guān)于“CKEditor擴(kuò)展插件：自動(dòng)排版功能autoformat插件怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
