ckeditor一键排版功能实现方法分析


Posted in Javascript onFebruary 06, 2020

本文实例讲述了ckeditor一键排版功能实现方法。分享给大家供大家参考,具体如下:

参考:

<script src="https://cdn.jsdelivr.net/npm/ckeditor-full@4.7.3/ckeditor.js"></script>

CKEDITOR.plugins.addExternal('autoformat', '/static/ckeditor/myplugins/autoformat/', 'plugin.js');
var editor = CKEDITOR.replace(this.$el, {
  customConfig: '/static/ckeditor/config.js',
  extraPlugins: 'autoformat'
});

ckeditor一键排版功能实现方法分析

config.js

CKEDITOR.editorConfig = function(config) {
  config.extraPlugins = "autoformart";
};

plugin.js

(function() {
  CKEDITOR.plugins.add("autoformat", {
    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, "");
  };
})();

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

Javascript 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
微信小程序实现留言功能
Oct 31 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
JavaScript如何判断input数据类型
Feb 06 #Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 #Javascript
JS实现盒子拖拽效果
Feb 06 #Javascript
JavaScript实现拖拽盒子效果
Feb 06 #Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 #Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
jquery 手势密码插件
2017/03/17 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python实现flappy bird游戏
2018/12/24 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
python怎么调用自己的函数
2020/07/01 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
自主招生自荐信范文
2013/12/04 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
民事起诉状范文
2015/05/19 职场文书
如何写新闻稿
2015/07/18 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python