ckeditor5富文本編輯器填坑記錄

個人需求

• 富文本
• 好看（樣式現代點的）
• 上傳圖片能支持後端接口的（好多都是base64）
• 最後獲得的富文本內容能好好的顯示

選擇使用ckeditor5以後，在簡單時候時遇到了一些問題

• 上傳圖片接口服務器端不知道該返回什麼格式的json
• 最終獲得的富文本內容不能很好的展示

使用步驟

引入靜態資源

<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>

使用cdn方式引入ckeditor.js，爲何就這一個js呢，其餘富文本庫通常都有好幾個，至少一個js文件和一個css樣式文件，咱們接下去往下看

頁面元素申明

<textarea class="form-control" name="comment" id="comment" cols="30" rows="10" placeholder="請輸入評論"></textarea>

添加一個普通的文本域，重點是id

js初始化

var theEditor;
    ClassicEditor
    .create( document.querySelector( '#comment' ),{
        language:'zh-cn',//須要引入語言文件
        ckfinder: {
            uploadUrl: '/topic/upload'
        }
    })
    .then(function(editor){
        theEditor  = editor;
    }).catch(function(error){
        console.error(error);
});

踩的幾個坑

如何上傳圖片以及自定義接口返回json的格式

官網給出了兩個方法，一個是用Easy Image 一個雲端平臺，建立帳號，初始化時填入相關數據就能使用,除了與ckeditor整合程度搞以及提供基本的上傳功能外，還能提供響應式方案（一次上傳以後返回不一樣大小的尺寸）、cdn，可是價格感人，放棄。
另外一種則是自定義上傳接口（上面給出的代碼）

ckfinder: {
                        uploadUrl: '/topic/upload'
        }

,可是找了一圈官方文檔仍是沒找response該返回的json格式，最後經過stackoverflow查到，
success response

{
    "uploaded": true,
    "url": "http://127.0.0.1/uploaded-image.jpeg"
}

failure response

{
    "uploaded": false,
    "error": {
        "message": "could not upload this image"
    }
}

獲取富文本的內容

參考上面代碼，父級域中聲明一個變量（theEditor）,初始化時將ckeditor實例付給該變量，其餘地方須要獲取富文本內容時，使用

theEditor.getData();

渲染富文本內容時的樣式問題

一般富文本編輯器有兩種方式處理樣式問題，一種是提供css（好像比較少見），好比生成的富文本內容中含有

<p class="left"></p>

ckeditor採用的是相似這種，可是他不須要你引用css文件，而是經過js將css樣式插入到頁面
提供的樣式文件中有對應樣式類的聲明，
另外一種則爲使用內聯樣式，將樣式處理到生成的標籤上，好比

<p sytle="float-left"></p>

直接ckeditor獲取到內容渲染到頁面後，發現樣式不對，好比一張居右的圖片，此時html內容爲

<figure class="image image-style-side"><img src="http://olpyjtmgz.bkt.clouddn.com/FpTDzqcGv8BNQvHJWAmDGrpP9Eaf"></figure>

結果圖片與富文本編輯器內的樣式預覽並不一致，經過查看編輯器內圖片的樣式發現

.ck-content .image>img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

樣式申明在一個class爲ck-content下，因此須要在渲染富文本內容的父級元素上添加clss爲 ck-content

參考

自定義上傳接口的response json