CKEditor擴展插件：自動排版功能

 

CKEditor是新一代的FCKeditor，是一個重新開發的版本。CKEditor是全球最優秀的網頁在線文字編輯器之一，因其驚人的性能與可擴展性而廣泛的被運用於各大網站。

如果還沒接觸過的可以看看，在線演示地址：http://ckeditor.com/demo

當然了，今天我們的主要目的還不是介紹。

還未下載CKEditor的同學可以點擊下載：http://ckeditor.com/download

下載完后的結構是這樣的：

 

好了,開始制作了，我們照着執行順序來吧。

1.注冊插件

首先找到根目錄下的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.gif' )});
        }
    });
})();

 

 

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.gif"
            });
        }
    });
    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=\"" + 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, "");
    };
})();