ckeditor5,ckeditor4富文本編輯器在vue中的使用

時間 2019-11-18

標籤 ckeditor5 ckeditor ckeditor4 文本編輯器 vue 使用简体版

原文原文鏈接

先介紹下ckeditor5的使用方式:javascript

安裝依賴：vue

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

要建立編輯器實例，必須首先將編輯器構建和組件模塊導入應用程序的根文件中（例如，main.js在由Vue CLI生成時）。而後，使用如下Vue.use()方法啓用組件：java

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use( CKEditor );

在組件中的具體使用方式以下：webpack

<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>

若是須要自定義配置，則能夠配置以下：web

editorConfig: {
　　　　
      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兩個字段
　　　　　},
    }language: 'zh-cn',

這裏要說明的是上傳接口必須返回的有uploaded和url這兩個字段才能夠,以下圖：npm

設置ckeditor5輸入區域的高度：json

<style>
.ck-editor__editable { min-height: 100px; }
</style>

效果圖以下：後端

至此，就大功告成了！！！！！！api

在此要說明一點，ckeditor5在ie11下是不兼容的，要想在ie11下正常運行，可能須要較低版本的ckeditor,,,在解決兼容性的時候，發現ckeditor4是兼容ie11的。app

下面咱們介紹一下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         });