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

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

参考:

http://cdn.ckeditor.com/

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



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

ckeditor一键排版功能实现方法分析_第1张图片

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(
          /
\s* <\/span>\s*<\/div>/gi, "

[ page]

" ); //将div span标签替换为p 标签 tmpDiv.innerHTML = editorhtml .replace(/ /gi, "") .replace(/
0 ) { tmpDiv.innerHTML = tmpDiv.innerHTML.replace( /<\/p>/gi, "

" ); //每个段落相隔一行 } 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( /

\[ page\]<\/p>/gi, '

 
' ); //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 = '

' + tempobject[j] + "

"; 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 = '

' +
              tempimg[j].alt +
              '

'; html = html.replace("#FormatImgID_" + j + "#", imghtml); } } for (var i = 0; i < strongcount; i++) { html = html.replace( "#FormatStrongID_" + i + "#", "

" + strongarray[i] + "

" ); } while (html.indexOf("

") != -1) html = html.replace("

", "

"); while (html.indexOf('

') != -1) html = html.replace( '

', '

' ); 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 += '

' + tmp + "

\n"; } else { html += "

" + tmp + "

\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富文本编辑器开发有所帮助。

你可能感兴趣的:(ckeditor一键排版功能实现方法分析)