CKEditor扩展插件:自动排版功能autoformat插件实现方法详解

本文实例讲述了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

借用某编辑器的:

如未生效,记得清除cookie或更换浏览器查看显示效果。

5、效果对比

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

(0)

相关推荐

  • fckeditor 插件实例 制作步骤

    以创建一个简单的超级链接为例.可以从已经存在的placeholder插件的目录作为基本的骨架. 1. 命名插件名称为:"InsertLink". ,并建立同名的目录,并且在InsertLink目录下创建一个Lang的目录,lang目录下至少有一个文件en.js.该文件中至少要有按钮和对话框标题的国际化信息,比如: FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //按钮的标题 FCKLang.InsertLinkDlgTitle = 'Link

  • autogrow 让FCKeditor高度随内容增加的插件

    这个插件在默认情况下可能运行不正常,必须做一点修改才可以. 打开插件所在文件:/editor/plugins/autogrow/fckplugin.js 找到第65行: window.frameElement.height = iMainFrameSize ; 将其修改为: 复制代码 代码如下: if (window.frameElement.style.height) { window.frameElement.style.height = iMainFrameSize; } else { w

  • ckeditor插件开发简单实例

    CKeditor就是FCKeditor,在发布一个新版本的时候,把自己的名字都改了,不要"F". 需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数. 做法: 1.在CKeditor的plugins文件夹下,创建新文件夹"addmap",这个名字可以自定义,这个名字是我项目中用的名字 2.在addmap文件夹下,放一张gif图片"map.gif",用来作图标用

  • ckeditor自定义插件使用方法详解

    ckeditor是一款功能很强大的富文本编辑的工具,给我们提供了绝大多数功能,满足我们日常开发所用,但由于特殊情况,可能会需要修改ckeditor的插件.ckeditor提供了给我们很方便扩展插件的接口. 最经由于项目的需要,需要重写ckeditor的上传图片的功能,以下是自定义图片上传功能的部分代码: 1.在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以图片,在images目录下放入插件图片image.

  • CKEditor中加入syntaxhighlighter代码高亮插件

    从官网 下载ckeditor,我下载的是CKEditor 3.3.1 .CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter ". 1.在"ckeditor/plugins/"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin

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

    本文实例讲述了ckeditor一键排版功能实现方法.分享给大家供大家参考,具体如下: 参考: http://cdn.ckeditor.com/ https://www.jb51.net/article/179679.htm <script src="https://cdn.jsdelivr.net/npm/ckeditor-full@4.7.3/ckeditor.js"></script> CKEDITOR.plugins.addExternal('autofo

  • FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

    Introduction(简介) This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighligh

  • CKEditor 附插入代码的插件

    按照惯例,先来段废话:CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 从官网下载ckeditor,我下载的是ckeditor_3.0.2.CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter". 1.在"cked

  • FCKeditor 插件开发 示例(详细版本)

    (FCKeditor.地址是:http://www.fckeditor.net/.我下载的版本是:2.6.3.)What ?      FCKeditor一直是web上编辑器的比较好的一个选择,他是开源的,而且效果不错.FCKeditor的插件是对FCKeditor的扩展功能.Why?尽管一般条件下FCKeditor能适应使用,但你可能对FCKeditor仅有的功能不满意,好.FCKeditor提供了插件开放功能,只要你能想到,你就做吧.How?        我就一个简单的"Hello&quo

  • 添加FCKeditor插件需要注意的地方

    于是在上WC之际决定要改造一下编辑器.不过我一般动手之前会google一下,这样往往会很有效果,发现了其实FCKeditor支持插件的,很多插件经过简单的配制就可以使用了.不过这方面讲怎么用插件的资料就很少了(也许我太笨),给你一个插件包,究竟要怎么用呢?试验了几个插件也找到了相应的方法,其实很简单的. 1.把插件放到相应的插件目录"/FCKeditor/edito/plugins/"里面. 2.打开"/FCKeditor/fckconfig.js",找到"

随机推荐