本文實例講述了CKEditor擴展插件：自動排版功能autoformat插件實現方法。分享給大家供大家參考，具體如下：

1.注冊插件

首先找到根目錄下的ckeditor/config.js文件，打開文件如下：

CKEDITOR.editorConfig = function (config) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E';}; 

我們需要將我們的插件注冊進CKEDITOR中。

在方法內部加入如下代碼：

config.extraPlugins = "autoformart";

如果值中有其他字符,則用","逗號分隔,增加.

2.創建Plugin.js文件

在Plugins文件下新建一個與插件名相同的文件夾：aotuformart 的文件夾，意為自動排版。

再在文件夾內創建一個plugin.js文件，因為在注冊插件后，首先加載和執行的就是plugin.js這個文件。

首先我們構建一個自執行函數，在自執行函數中添加一個插件：

(function(){ CKEDITOR.plugins.add('autoformat',{  init:function(editor){  //初始化操作  } });})();

添加一個命令和按鈕在初始化函數中，如下：

(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方法有兩個參數：插件命令名稱，第二個是命令執行的方法。

addButton方法的第一個參數是：插件的按鈕名稱

　　　　label：鼠標懸浮時插件提示

　　　　command：執行插件命令的名稱

　　　　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; //暫時無法實現局部格式化   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”是“，”。不轉換"，"   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, ""); };})();