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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
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
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
异常和异常类的概念
2014/09/12 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
公司员工活动策划方案
2014/08/20 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年调度员工作总结
2014/11/19 职场文书
企业财务管理制度范本
2015/08/04 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB