CKEditor

CKEditor

統合：

まずパッケージの紹介

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

main,jsで依存関係を導入します。

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );

、リッチテキスト編集を使用したいページで使用します。

 <div id="app">
 <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
 </div>
</template>
 
<script>
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
 export default {
 name: 'app',
 data() {
 return {
 editor: ClassicEditor,
 editorData: '<p>CKEditor </p>',
 editorConfig: {
 // The configuration of the editor.
 }
 };
 }
 }
</script>

成功した滑走は以下の通りです。

利点：高価値、シンプルなインターフェイス、軽量、シンプルな設定方法、イメージをアップロードする際のバックエンド設定が少ない