相思资源网 Design By www.200059.com

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

参考:

http://cdn.ckeditor.com/

https://www.jb51.net/article/179679.htm

<script src="/UploadFiles/2021-04-02/ckeditor.js">

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;">&nbsp;<\/span>\s*<\/div>/gi,
          "<p>[ page]</p>"
        ); //将div span标签替换为p 标签
        tmpDiv.innerHTML = editorhtml
          .replace(/&nbsp;/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;">&nbsp;</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="/UploadFiles/2021-04-02/' +
              tempimg[j].src +
              '">

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

标签:
ckeditor,一键排版

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“ckeditor一键排版功能实现方法分析”

暂无ckeditor一键排版功能实现方法分析的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。