[ckeditor5 官網](https://docs.ckeditor.com/ckeditor5/latest/index.html) # 安裝 npm 安裝ckeditor5 使用的 10.1.0版本 ``` npm install --save @ckeditor/ckeditor5-build-classic ``` # vue 頁面使用 ## html ``` <textarea id="editor" name="editor" v-model="ruleForm.content"></textarea> ``` ## 導入 ``` import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; ``` ## 初始化使用 ``` mounted() { let that = this; if (this.editorStatus == null && document.querySelector('#editor')) { this.editorStatus = "success"; ClassicEditor .create(document.querySelector('#editor'), { ckfinder: { // url 是上傳圖片的路徑 // 后臺至少返回兩個參數 // uploaded 1 表示上傳成功 // url 表示編輯器中存放的img標簽的src路徑 uploadUrl: 'url?command=QuickUpload&type=Files&responseType=json' }, toolbar: [ 'heading', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo', 'imageUpload' ], image: { toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ], styles: [ 'full', 'alignLeft', 'alignRight' ] } }) .then(editor => { that.editor = editor; }) .catch(error => { console.error(error); }); } }, ``` ## 提交表單 this.editor.getData(); 用于獲取編輯器內容 ``` // 提交表單 submitForm(formName) { this.ruleForm.content = this.editor.getData(); let that = this; this.$refs[formName].validate((valid) => { if (valid) { this.$axios.post('url', { title: this.ruleForm.title, content: this.ruleForm.content }) .then(function(response) { }) } }); } ```