vue+element-ui中引入編輯器

wangeditor編輯器

1.執行：npm install  --save  wangeditor

2.在你需要調用編輯器的vue文件中引入 wangeditor：

import E from 'wangeditor'

3.頁面調用：

<div id="editor">
    <!--<p>{{addFormData.content?'請輸入正文':addFormData.content}}  </p>-->
</div>

初始化編輯器：

在 mounted 方法中：

that.$nextTick(function () {
                // Code that will run only after the
                // entire view has been rendered
                // 創建編輯器
                that.editor = new E('#editor')
                // 自定義菜單配置
                that.editor.customConfig.menus = [
                    'bold',// 粗體
                    'italic',// 斜體
                    'head',// 標題
                    'quote',  // 引用
                    'list',  // 列表
                    'link',  // 插入鏈接
                    'image',  // 插入圖片
                    'table',  // 表格
                ]
                that.editor.customConfig.onchange = function (html) {
                    if (html.replace(/<\/?[^>]+>/g, '')!=="") {
                        that.addFormData.content = html
                        that.$refs['addForm'].validateField('content')
                    }
                    // html 即變化之后的內容
                    // console.log(html)
                }
                // 配置服務器端地址
                that.editor.customConfig.uploadImgServer = that.uploadUrl
                // 將圖片大小限制為 1M
                that.editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
                // 限制一次最多上傳 1 張圖片
                that.editor.customConfig.uploadImgMaxLength = 1
                that.editor.customConfig.uploadFileName = 'file'; //設置文件上傳的參數名稱
                that.editor.customConfig.uploadImgHooks = {
                    customInsert: function (insertImg, result, editor) {
                        // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
                        // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
                        // 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
                        if (result.code === 200) {
                            insertImg(that.imgSrc + result.data.id)
                        }
                        // var url = result.url
                        // insertImg(url)
                        // result 必須是一個 JSON 格式字符串！！！否則報錯
                    }
                }
                that.editor.create()
                that.editor.txt.html(that.addFormData.content ? that.addFormData.content : '')
                // 禁用
                if (that.addFormData.disabled) {
                    // that.editor.disable();
                    that.editor.$textElem.attr('contenteditable', false)
                }
            })

 注意：

小穎之所以把初始化編輯器寫在 $nextTick 內，是因為小穎調用編輯器時是在 el-dialog 組件中調用的，如果直接在 mounted 下初始化時，它始終不出來。

保存時：

                that.addFormData.content = that.editor.txt.html()
                that.btnLoading = true
                if (that.addFormData.content.replace(/<\/?[^>]+>/g, '')==="") {
                    that.addFormData.content = ''
                }

 ckeditor5 編輯器

1.執行：npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

2.在 main.js 中引入

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

3.在你需要編輯器的vue文件中：

先引入所需文件

    import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
    import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
    import { MyCustomUploadAdapterPlugin } from "@/util/upload"

upload.js處理上傳圖片

import {constants} from "@/util/common";

class MyUploadAdapter {
    constructor( loader ) {
        // 要在上載期間使用的文件加載器實例
        this.loader = loader;
    }

    // 啟動上載過程
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                this._initRequest();
                this._initListeners( resolve, reject, file );
                this._sendRequest( file );
            } ) );
    }

    // 中止上載過程
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // 使用傳遞給構造函數的URL初始化XMLHttpRequest對象.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open( 'POST', constants.uploadUrl, true );
        xhr.responseType = 'json';
    }

    // 初始化 XMLHttpRequest 監聽.
    _initListeners( resolve, reject, file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `無法上傳文件: ${ file.name }.`;

        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;
            // 當code＝＝200說明上傳成功，可以增加彈框提示；
            // 當上傳失敗時，必須調用reject()函數。
            if ( !response || response.error || response.code !== 200 ) {
                return reject( response && response.msg ? response.msg : genericErrorText );
            }
            //上傳成功，從后台獲取圖片的url地址
            resolve( {
                default: constants.downloadUrl + response.data.id
            } );
        } );

        // 支持時上傳進度。文件加載器有#uploadTotal和#upload屬性，用於在編輯器用戶界面中顯示上載進度欄。
        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }

    // 准備數據並發送請求
    _sendRequest( file ) {
        //通過FormData構造函數創建一個空對象
        const data = new FormData();
        //通過append()方法在末尾追加key為files值為file的數據，就是你上傳時需要傳的參數，需要傳更多參數就在下方繼續append
        data.append( 'file', file );//上傳的參數data
        // data.append( 'memberId', "666" );
        /**
         * 重要提示:這是實現諸如身份驗證和CSRF保護等安全機制的正確位置。
         * 例如，可以使用XMLHttpRequest.setRequestHeader()設置包含應用程序先前生成的CSRF令牌的請求頭。
         */
        this.xhr.send( data );
    }
}

function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        // 在這里將URL配置為后端上載腳本
        return new MyUploadAdapter( loader );
    };
}

export {
    MyUploadAdapter,
    MyCustomUploadAdapterPlugin
}

html調用:

 <ckeditor :editor="editor" v-model="addFormData.content" :config="editorConfig" data:disabled="addFormData.disabled"></ckeditor>

data中配置相應參數：

                //editor: {}
                editor: ClassicEditor,
                // editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                    language: 'zh-cn',
                    extraPlugins: [ MyCustomUploadAdapterPlugin ],
                    toolbar: {
                        items: [
                            'heading',
                            '|',
                            'bold',
                            'italic',
                            'link',
                            'bulletedList',
                            'numberedList',
                            '|',
                            'indent',
                            'outdent',
                            '|',
                            'imageUpload',
                            'blockQuote',
                            'insertTable',
                            'undo',
                            'redo'
                        ]
                    },
                }