wangeditor富文本编辑器

wangeditor

** 最终效果**

首先安装wangeditor
$ npm install wangeditor

将wangeditor 封装成组件方便使用

子组件代码

// wangeditor
<template>
    <div id="wangeditor" >
        <div ref="editorElem"  style="text-align:left;width: 1085px"></div>
        <div class="wangeditorVideo">
		//element的上传组件
            <el-upload
                    size="mini"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    class="upload-demo"
                    drag
                    tip="false"
                    :headers="headers"
                    :action='scurl'
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">上传视频</div>
            </el-upload>
        </div>
    </div>
</template>

<script>
    import E from 'wangeditor'
    import URL from "@/js/URL";
    // import Upload from '@/components/Upload'
    export default {
        name: 'editorElem',
        data() {
            return {
                scurl: URL.info.NewBroadcast.uploadItem,
                editor:null,
                editorContent:'',
                headers:{
                    ttsx_auth_token:localStorage.getItem('token')
                },
            }
        },
        props: ['catchData','content'],    //接收父组件的方法

        watch: {
            content () {
                this.editor.txt.html(this.content)
            }
        },
        mounted() {
            this.editor = new E(this.$refs.editorElem)        //创建富文本实例
            this.editor.customConfig.onchange = (html) => {
		console.log(html)
                this.editorContent = html
                this.catchData(html)  //把这个html通过catchData的方法传入父组件
            }
          
            this.editor.customConfig.uploadImgServer = ‘uploadItem’ //------上传图片的接口
            this.editor.customConfig.uploadFileName = 'file'	     //-------上传图片的名称
            this.editor.customConfig.uploadImgHeaders = {
                'Accept': '*/*',
                'ttsx_auth_token': localStorage.getItem('token')    //头部token
            }
            this.editor.customConfig.menus = [          //菜单配置
                'head',
                'list',  // 列表
                'justify',  // 对齐方式
                'bold',
                'fontSize',  // 字号
                'italic',
                'underline',
                'image',  // 插入图片
                'foreColor',  // 文字颜色
                'undo',  // 撤销
                'redo',  // 重复
                // 'video'//视频
            ]
            //下面是最重要的的方法
            this.editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    // 图片上传之前触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                    // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                    // return {
                    //     prevent: true,
                    //     msg: '放弃上传'
                    // }
                },
                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    let imgURl ='/api/resource/download/'+ result.data.data[0].encryptId
                    this.imgUrl = Object.values(imgURl).toString()
                },
                fail: function (xhr, editor, result) {
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function (xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    let imgURl ='/api/resource/dow' +
                        'nload/'+ result.data.data[0].encryptId
                    let imgName ='/api/resource/download/'+ result.data.data[0].fileName
                    let imgArr = {
                        url:imgURl
                    }
                    let url = Object.values(imgArr)      //result.data就是服务器返回的图片名字和链接
                    JSON.stringify(url)    //在这里转成JSON格式
                    insertImg(url)
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }
            this.editor.customConfig.pasteFilterStyle = false
            this.editor.create()
            this.editor.txt.html(this.content)
       
        },
        methods:{
		//上传视频
            handleAvatarSuccess(res, file) {
                let iframe ='res.url'; //上传成功后将视频地址赋值到video
                this.editor.txt.append("<video  src='"+iframe+"' controls='controls' style='width: 50%'></video><br>")   //上传成功之后赋值给editor
                this.editor.change()
                if(iframe){
                    this.$message.success('上传视频成功！');
                }else{
                    this.$message.error('上传视频失败！');
                }
            },
            beforeAvatarUpload(file) {
            }
        }
    }
</script>
<style>
    .w-e-text-container{
        height: auto!important;
        min-height:300px;
    }
    .w-e-text{
        min-height: 300px!important;
    }
    .el-upload-list{
        display: none;
    }
    .el-upload-dragger{
        width: 160px;
        height: 130px;
    }
    .el-upload-dragger{
        border: none;

    }

    .wangeditorVideo .upload-demo{
            text-align: center;
    }
    .wangeditor img{
        max-width: 100%;
    }


</style>

父组件代码

父组件引入富文本编辑器

<wangeditor v-if="iswanged" :catchData="catchData" :content="wznr"></wangeditor>

在这里接受子组件传过来的参数，赋值给data里的参数

    catchData(value) {
                this.form.content = value      //在这里接受子组件传过来的参数，赋值给data里的参数
                this.form.content = encodeURI(this.form.content.replace(/"|'|<|>/g, "\‘").replace(/ /g, "").replace(/《/g, "《").replace(/》/g, "》"))
            },