先介紹下ckeditor5的使用方式:
安裝依賴:
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
要創建編輯器實例,必須首先將編輯器構建和組件模塊導入應用程序的根文件中(例如,main.js
在由Vue CLI生成時)。然后,使用以下Vue.use()
方法啟用組件:
import Vue from 'vue'; import CKEditor from '@ckeditor/ckeditor5-vue'; Vue.use( CKEditor );
在組件中的具體使用方式如下:
<template> <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>Content of the editor.</p>', editorConfig: { // The configuration of the editor. } }; } } </script>
如果需要自定義配置,則可以配置如下:
editorConfig: {
language:
'zh-cn'
,
toolbar: ['heading', 'fontSize', 'highlight', 'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:blueMarker', 'fontFamily', 'alignment', 'imageUpload', 'bold', 'italic', 'underline', 'imageStyle:full', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'link', 'undo', 'redo'], fontSize: { options: [8, 9, 10, 11, 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72], }, highlight: { options: [ { model: 'blackPen', class: 'pen-black', title: '黑色', color: 'var(--ck-highlight-pen-black)', type: 'pen' }, { model: 'redPenPen', class: 'pen-red', title: '紅色', color: 'var(--ck-highlight-pen-red)', type: 'pen' }, } }, ckfinder: { uploadUrl: `${store.getters.currentStack.baseURL}/ckeditor/upload`, // 后端處理上傳邏輯返回json數據,包括uploaded 上傳的字節數 和url兩個字段 }, }
這里要說明的是上傳接口必須返回的有uploaded和url這兩個字段才可以,如下圖:
設置ckeditor5輸入區域的高度:
<style> .ck-editor__editable { min-height: 100px; } </style>
效果圖如下:
至此,就大功告成了!!!!!!
在此要說明一點,ckeditor5在ie11下是不兼容的,要想在ie11下正常運行,可能需要較低版本的ckeditor,,,在解決兼容性的時候,發現ckeditor4是兼容ie11的。
下面我們介紹一下ckeditor4的使用方式:
從CKEditor 網站:https://ckeditor.com/ckeditor-4/download/下載CKEditor,這個是我項目中下載好的包,已經上傳到我的百度網盤
鏈接:https://pan.baidu.com/s/1_fskJGVMedK_7ghvK8Q4qg
提取碼:yals
復制這段內容后打開百度網盤手機App,操作更方便哦
引用ckeditor,並且需要在webpack.base.config.js中配置如下:
<script type="text/javascript" src="static/ckeditor/ckeditor.js"></script>
<textarea id="editor" rows="10" cols="80"></textarea>
import CKEDITOR from "CKEDITOR"
mounted: function () { CKEDITOR.replace("editor", {height: "300px", width: "100%", toolbar: "Full"}); this.editor = CKEDITOR.instances.editor; console.log(this.editor.getData()); },
效果如下圖:
在此說一下關於圖片上傳的配置:
修改ckeditor文件夾下config.js:
config.removeDialogTabs = 'image:advanced;image:Link';//隱藏超鏈接和高級選項 config.image_previewText = ' ';//設置圖片預覽說明為空 //上傳圖片窗口用到的接口 config.filebrowserImageUploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit"; /*config.filebrowserUploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit"; // 使上傳圖片彈窗出現對應的“上傳”tab標簽 config.removeDialogTabs = 'image:advanced;link:advanced'; //粘貼圖片時用得到 config.extraPlugins = 'uploadimage'; config.uploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit";*/
這樣就能實現圖片的上傳啦,
效果圖如下:
在項目中發現,ckeditor的setData('1111111')方法不好用,老是設置不上數據,於是我自己也是百度了各種資料都不大好使,后來用dom添加的方式給實現了,
我是這樣寫的
1 this.$http 2 .get( 3 `${global.postUrl}/gdt_information/newsManage/queryNewsById?newsId=${this.newsId}` 4 ) 5 .then(res => { 6 this.editForm = res.data.data; 7 this.editor.setData(this.editForm.newsContent); 8 let body = (document.getElementById('editor-textarea').getElementsByTagName('iframe')[0]).contentDocument.getElementsByTagName('body'); 9 console.log(body); 10 setTimeout(() => { 11 if(body.length ==1){ 12 console.log(body[0]); 13 body[0].innerHTML = this.editForm.newsContent; 14 } 15 },500); 16 17 }) 18 .catch(error => { 19 console.log(error); 20 });
在textarea的外層聲明了一個div,
也不知道還有沒有更好的解決辦法,希望有更好辦法的小伙伴多多分享!!!