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
}

upload.js

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'
                        ]
                    },
                }