CKEditor扩展插件:自动排版功能autoformat插件实现方法详解


Posted in Javascript onFebruary 06, 2020

本文实例讲述了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, "");
 };
})();

3、配置到菜单中

例basic模式:

['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize']

改为

['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],['Maximize','autoformat']

4、图标

当前占位已经实现,但由于没有图标,显示上会有问题,此时自己找或制作一个图标,放到autoformat/images/下命名为autoformat.png

借用某编辑器的:CKEditor扩展插件:自动排版功能autoformat插件实现方法详解

如未生效,记得清除cookie或更换浏览器查看显示效果。

5、效果对比

CKEditor扩展插件:自动排版功能autoformat插件实现方法详解

CKEditor扩展插件:自动排版功能autoformat插件实现方法详解

希望本文所述对大家CKEDitor富文本编辑器开发有所帮助。

Javascript 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
JS实现盒子拖拽效果
Feb 06 #Javascript
JavaScript实现拖拽盒子效果
Feb 06 #Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 #Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 #Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 #Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 #Javascript
js get和post请求实现代码解析
Feb 06 #Javascript
You might like
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
一分钟理解js闭包
2016/05/04 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
node.js实现快速截图
2016/08/27 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
中英文自我评价语句
2013/12/20 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
社区敬老月活动总结
2015/05/07 职场文书
医学会议开幕词
2016/03/03 职场文书