快捷導(dǎo)航

CKEditor擴(kuò)展插件：自動排版功能autoformat插件實(shí)現(xiàn)方法詳解

更新時(shí)間：2020年02月06日 11:07:05 作者：劉博的

這篇文章主要介紹了CKEditor擴(kuò)展插件：自動排版功能autoformat插件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了CKEditor擴(kuò)展插件實(shí)現(xiàn)自動排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下

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

1.注冊插件

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

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

我們需要將我們的插件注冊進(jìn)CKEDITOR中。

在方法內(nèi)部加入如下代碼：

config.extraPlugins = "autoformart";

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

2.創(chuàng)建Plugin.js文件

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

再在文件夾內(nèi)創(chuàng)建一個(gè)plugin.js文件，因?yàn)樵谧圆寮螅紫燃虞d和執(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:'自動排版',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)

所有代碼(上邊的兩塊代碼為演示注冊插件)

//一鍵排版
(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í)無法實(shí)現(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;?">&nbsp;<\/span>\s*<\/div>/gi, '<p>[ page]</p>'); //將div span標(biāo)簽替換為p 標(biāo)簽
    tmpDiv.innerHTML = editorhtml.replace(/&nbsp;/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>');  //每個(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(/<p>\[ page\]<\/p>/gi, '<div style="page-break-after: always;"><span style="display: none;">&nbsp;</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è)計(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 += "<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、圖標(biāo)

當(dāng)前占位已經(jīng)實(shí)現(xiàn)，但由于沒有圖標(biāo)，顯示上會有問題，此時(shí)自己找或制作一個(gè)圖標(biāo)，放到autoformat/images/下命名為autoformat.png

借用某編輯器的：

如未生效，記得清除cookie或更換瀏覽器查看顯示效果。

5、效果對比

希望本文所述對大家CKEDitor富文本編輯器開發(fā)有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

CKEditor擴(kuò)展插件：自動排版功能autoformat插件實(shí)現(xiàn)方法詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具