CKEditor4.7怎樣實現上傳圖片，瀏覽服務器(無需ckfinder)，nodejs圖片管理，字體居中，圖片居中(超詳細)

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

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

而後進入配置界面，第一個choose preset通常就選standard標準的

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

第一個是Justify

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

第二個是Enhanced Image

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

而後根據本身的需求進行添加，但注意這裏面有許可能是不支持4.7版的，謹慎添加，有不少添加以後沒法顯示編輯器。

而後選擇skin皮膚，添加language語言，在這裏我添加了中文簡體和中文繁體，根據你的須要。

最後，勾上贊成協議，點擊下載就好了。

下載解壓後會獲得一個文件夾，這就是你須要的文件夾，把它放到你的項目public中，文件夾打開有個ckeditor.js文件，經過<script src="/ckeditor/ckeditor.js"></script>添加到你的網頁，就能夠在網頁中使用了，使用方法：

<textarea name="content" id="editor1" rows="10" cols="80">內容</textarea>
<script>
    CKEDITOR.replace('editor1', {
        language: 'zh-CN',//改爲中文版
    });
</script>

而後就能夠在網頁看到效果了

咱們點開圖片，發現並無上傳圖片的功能，也沒有瀏覽服務器的功能

如今咱們來一一實現

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

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

此時刷新頁面點擊圖片會發現多了個上傳標籤

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

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

通常就加第一個就好了，也能夠三個都加，顧名思義，看它的名字就會懂什麼意思了吧，後面的是你的服務器後臺，響應過去，在你的服務器實現上傳，每種語言實現也就不同，這裏不詳講，有問題的能夠去看看你使用語言的文件上傳方式，上傳圖片的功能就實現了。

而後是瀏覽服務器的功能，但是在上面連按鈕都沒有，怎麼實現呢？其實很簡單的，只需在剛纔的config.js文件裏面加上這段代碼便可：

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

後面的是你服務器響應地址，保存後去刷新頁面，發現，按鈕已經出來了

可是在服務器裏面要怎麼實現圖片的管理呢？這裏每種語言實現也不同了，你們能夠自行搜索圖片管理的代碼，但我看到網上Java的，PHP的挺多，就是不多看到nodejs的，這裏給出nodejs的實現方法：

服務器代碼：

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 %>
<link rel="stylesheet" type="text/css" href="/stylesheets/image-picker.css">
<script src="/javascripts/prettify.js" type="text/javascript"></script>
<script src="/javascripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="/javascripts/show_html.js" type="text/javascript"></script>
<script src="/javascripts/image-picker.min.js" type="text/javascript"></script>
<div class="container">
    <div>
        <div class="text-center" style="padding-bottom: 20px;">
            <button type="button" class="btn btn-primary select">選擇</button>
            <button type="button" class="btn btn-primary delete">刪除</button>
        </div>
        <select class="image-picker" style="display: none;">
            <% results.forEach(function(item){ %>
                <option data-img-src="<%= item.url%>" value="<%= item.name%>"><%= item.name%></option>
            <%})%>
        </select>
    </div>
</div>
<script type="text/javascript">
jQuery("select.image-picker").imagepicker({
    hide_select:  false,
});
$(document).ready(function(){
    $(".select").click(function(){
        window.location.href = "/adminSelectImg/" + $(".image-picker").val() + "/" + <%= callback%>;
    });
    $(".delete").click(function(){
        window.location.href = "/adminDeleteImg/" + $(".image-picker").val();
    });
});
</script>
<% include ../footer.ejs %>

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

router.get('/adminSelectImg/:name/:callback', function (req, res, next) {
    var name = req.params.name;
    var callback = req.params.callback;
    var str = "<script type=\"text/javascript\">" + "window.opener.CKEDITOR.tools.callFunction("+ callback + ",'" + "/images/uploads/"+ name + "','');window.close();" + "</script>";
    res.send(str);
});

刪除的代碼就不粘了，觸類旁通，註明下代碼中的window.opener.CKEDITOR.tools.callFunction，這個是ckeditor的反值得函數，執行後就會把括號內的後面的路徑加載到圖像信息的URL中，這樣點擊肯定就能夠將圖片放入編輯器了。