一、為什麼選擇CKEditor5

最近開發一個文章管理的模組，需要使用富文字編輯器實現本文的新增、編輯、展示功能。

其中tinymce和CKEditor都比較受歡迎，但是tinymce上傳圖片只能新增連結，想要從本地上傳圖片就要自己擴充套件，為了方便，選擇了CKEditor，但是CKEditor4是不相容vue的，所以選取了CKEditor5，它支援以下主流框架，並能使用npm進行安裝，官網地址https://ckeditor.com/ckeditor-5/

二、安裝

1、選擇編輯器種類

2、下載/安裝

CKEditor5提供三種下載方式，npm安裝、下載zip複製到自己的專案，或直接使用CDN，請小主們自行選擇，我習慣使用npm，所以就以npm為例啦 

安裝命令：

npm install --save @ckeditor/ckeditor5-build-decoupled-document

解除安裝命令：

npm uninstall  @ckeditor/ckeditor5-build-decoupled-document（沒有解除安裝需求的不用執行此命令）

三、開始使用 

1、引入

import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'

2、建立編輯器

html部分

<!-- 工具欄容器 -->
<div id="toolbar-container"></div>

<!-- 編輯器容器 -->
<div id="editor">
    <p>This is the initial editor content.</p>
</div>
 

js部分

export default {
  data() {
    return {
      editor:null,//編輯器例項
    }
  }
  mounted() {
     this.initCKEditor()
  },
   methods: {
      initCKEditor() {
        CKEditor.create(document.querySelector('#editor'), {
          ckfinder: {
            uploadUrl: '/admin/Upload/uploadUrl'
            //後端處理上傳邏輯返回json資料,包括uploaded(選項true/false)和url兩個欄位
          }
        }).then(editor => {
          const toolbarContainer = document.querySelector('#toolbar-container');
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor //將編輯器儲存起來，用來隨時獲取編輯器中的內容等，執行一些操作
        }).catch(error => {
          console.error(error);
        });
     }
  }
}
 

這樣就渲染出一個編輯器了，如圖

四、常規操作

1、獲取內容getData()

新增一片文章，就要獲取編輯器中的內容，上文中，我們已經儲存了編輯器例項，可以用this.editor呼叫，所以獲取內容就變得簡單了

this.editor.getData()

2、初始化編輯器內容setData()

編輯一篇文章時，需要將文章資訊放入編輯器，在此，我們使用setData()方法，contentVal指文章內容，自行替換

this.setData(contentVal)

3、編輯器設為只讀 isReadOnly

展示一篇文章，我們絕對不能直接放在容器中將儲存的內容通過v-html直接渲染出來，血的教訓！！！這樣會丟失部分樣式！

我發現在通過getData()獲取資料時，比如一些表格，在編輯器檢查元素，發現標籤中是包含class的，但是獲取的內容中卻將class過濾掉了，找了好多資料，有人說可以通過allowedContent設定，從而使class得以保留，但是查找了一下官方文件發現這應該是CKEditor的解決方式

官方解釋是這樣的：

與CKEditor 4不同，CKEditor 5實現了自定義資料模型。這意味著載入到編輯器中的每個內容都需要轉換為該模型，然後再渲染回檢視。

每種內容都必須由某些功能處理。該功能定義了HTML（檢視）和編輯器模型之間的雙向轉換。

也就是說，我們只有將從編輯器中獲取的內容放到編輯器，才會正常顯示，所以，如果我們要展示一篇文章，只需要建立一個編輯器例項，不用初始化工具欄，再將編輯器設定為只讀即可

html

<div id="editor1"></div>

js

methods:{
  initCKEditor() {
    CKEditor.create(document.querySelector('#editor')).then(editor => {
      editor.isReadOnly = true; //將編輯器設為只讀
      editor.setData(this.content) //顯示文章內容 content只是我存的一個變數 儲存了要顯示的文章內容 自行替換
    }).catch(error => {
      console.error(error);
    });
  }
}

效果如下

如果有什麼問題 歡迎大家批評指正