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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
Smarty安装配置方法
2008/04/10 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python实现TCP文件传输
2020/03/20 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
文员岗位职责
2013/11/09 职场文书
共产党员公开承诺书
2014/03/25 职场文书
老人祝寿主持词
2014/03/28 职场文书
卖车协议书
2014/04/21 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
竞选部长演讲稿
2014/04/26 职场文书
教师辞职信范文
2015/02/28 职场文书
正规借条模板
2015/05/26 职场文书
老乡会致辞
2015/07/28 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang