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

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

然后進入配置界面，第一個choose preset一般就選standard標準的

第二個需要添加兩個東西進去

第一個是Justify

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

第二個是Enhanced Image

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

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

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

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

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

內(nèi)容

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

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

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

首先圖片上傳功能，找到ckeditor文件夾，進入后找到plugins，點進去

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

此時刷新頁面點擊圖片會發(fā)現(xiàn)多了個上傳標簽

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

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

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

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

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

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

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

服務器代碼：

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 %>

圖片選擇服務器處理代碼：

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，這個是ckeditor的反值得函數(shù)，執(zhí)行后就會把括號內(nèi)的后面的路徑加載到圖像信息的URL中，這樣點擊確定就可以將圖片放入編輯器了。