首先是下載CKEditor，下載地址：http://ckeditor.com/download

選擇里面的Customize自定義，如圖

然后進(jìn)入配置界面，第一個(gè)choose preset一般就選standard標(biāo)準(zhǔn)的

第二個(gè)需要添加兩個(gè)東西進(jìn)去

第一個(gè)是Justify

它的作用是添加左對(duì)齊右對(duì)齊居中的按鈕，可以使字體居中，但只添加這個(gè)無法使圖片居中

第二個(gè)是Enhanced Image

有了它，就可以使圖片居中了。

然后根據(jù)自己的需求進(jìn)行添加，但注意這里面有許多是不支持4.7版的，謹(jǐn)慎添加，有很多添加之后無法顯示編輯器。

然后選擇skin皮膚，添加language語言，在這里我添加了中文簡(jiǎn)體和中文繁體，根據(jù)你的需要。

最后，勾上同意協(xié)議，點(diǎn)擊下載就行了。

下載解壓后會(huì)得到一個(gè)文件夾，這就是你需要的文件夾，把它放到你的項(xiàng)目public中，文件夾打開有個(gè)ckeditor.js文件，通過添加到你的網(wǎng)頁，就可以在網(wǎng)頁中使用了，使用方法：

內(nèi)容

然后就可以在網(wǎng)頁看到效果了

我們點(diǎn)開圖片，發(fā)現(xiàn)并沒有上傳圖片的功能，也沒有瀏覽服務(wù)器的功能

現(xiàn)在我們來一一實(shí)現(xiàn)

首先圖片上傳功能，找到ckeditor文件夾，進(jìn)入后找到plugins，點(diǎn)進(jìn)去

找到iamge2文件夾，進(jìn)入后找到image2.js，用編輯器打開，搜索hidden，此文件中只有兩處hidden，找到id為"Upload"的hidden，將"!0"的"!"去掉，如圖：

此時(shí)刷新頁面點(diǎn)擊圖片會(huì)發(fā)現(xiàn)多了個(gè)上傳標(biāo)簽

此時(shí)就可以點(diǎn)擊Choose File上傳圖片了，但是點(diǎn)擊上傳到服務(wù)器不能上傳，此時(shí)需要在ckeditor文件夾中的config.js配置文件中加一段代碼：

config.filebrowserUploadUrl = "/ckeditorUpload?type=File";  
config.filebrowserImageUploadUrl = "/ckeditorUpload?type=image";
config.filebrowserFlashUploadUrl = "/ckeditorUpload?type=Flash";

一般就加第一個(gè)就行了，也可以三個(gè)都加，顧名思義，看它的名字就會(huì)懂什么意思了吧，后面的是你的服務(wù)器后臺(tái)，響應(yīng)過去，在你的服務(wù)器實(shí)現(xiàn)上傳，每種語言實(shí)現(xiàn)也就不一樣，這里不詳講，有問題的可以去看看你使用語言的文件上傳方式，上傳圖片的功能就實(shí)現(xiàn)了。

然后是瀏覽服務(wù)器的功能，可是在上面連按鈕都沒有，怎么實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單的，只需在剛才的config.js文件里面加上這段代碼即可：

config.filebrowserImageBrowseUrl = "/browerServer?type=image";

后面的是你服務(wù)器響應(yīng)地址，保存后去刷新頁面，發(fā)現(xiàn)，按鈕已經(jīng)出來了

但是在服務(wù)器里面要怎么實(shí)現(xiàn)圖片的管理呢？這里每種語言實(shí)現(xiàn)也不一樣了，大家可以自行搜索圖片管理的代碼，但我看到網(wǎng)上Java的，PHP的挺多，就是很少看到nodejs的，這里給出nodejs的實(shí)現(xiàn)方法：

服務(wù)器代碼：

router.get("/browerServer", function (req, res, next) {
    var callback = req.query.CKEditorFuncNum;
    var imgPath =  "./public/images/uploads";
    var imgInfols = [];
    try {
        var files = rd.readSync(imgPath);
        for (var i in files) {
            if (!fs.lstatSync(files[i]).isDirectory()) {
                if (files[i].toLowerCase().split(/.(jpg|jpeg|png|gif|bmp)$/).reverse()[0].length == 0) {
                    console.log(files[i]);
                    imgInfols[imgInfols.length] = {
                        name: files[i].split("/").reverse()[0],//獲取文件名
                        url: files[i].split("/public").reverse()[0],
                        mtime: fs.statSync(files[i]).mtime
                    }
                }
            }
        }

    }
    catch (e) {
        console.log(e);
    }
    imgInfols.sort(function (a, b) {
        return Date.parse(b.ctime) - Date.parse(a.ctime);
    });
    console.log(callback);
    res.render("adminImgManage", {results:imgInfols, callback:callback});
});

adminImgManage.ejs代碼：//這里我用了image-picker，詳見http://rvera.github.io/image-...

<% include ../header.ejs %>






    

        

            選擇
            刪除
        
        
            <% results.forEach(function(item){ %>
                <%= item.name%>
            <%})%>
        
    


<% include ../footer.ejs %>

圖片選擇服務(wù)器處理代碼：

router.get("/adminSelectImg/:name/:callback", function (req, res, next) {
    var name = req.params.name;
    var callback = req.params.callback;
    var str = "";
    res.send(str);
});

刪除的代碼就不粘了，舉一反三，注明下代碼中的window.opener.CKEDITOR.tools.callFunction，這個(gè)是ckeditor的反值得函數(shù)，執(zhí)行后就會(huì)把括號(hào)內(nèi)的后面的路徑加載到圖像信息的URL中，這樣點(diǎn)擊確定就可以將圖片放入編輯器了。