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

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

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

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?