vue中引入富文本编辑器ueditor

老规矩，先上效果图

首先进入ueditor官网下载ueditor插件，我下的是php版的，下载后放在static文件夹里

在main.js里面引入ueditor文件

新建一个ueditor组件editor.vue,代码如下

<template>
    <div id="Ueditor" style="margin:10px">
        <script id="editor" type="text/plain"></script>
        <br>
        <el-button @click="getUEContent">带标签提交</el-button>
        <el-button @click="getUEText">纯文本提交</el-button>
    </div>
</template>
<script>
export default {
    name:'Ueditor',
    data(){
        return{
            editor: null
        }
    },
    props: {
        defaultMsg: {
            type: String
        },
        config: {
            //我们在编辑器中上传图片或者视频，也会出现响应的报错，这是因为没有配置服务器的请求接口，在ueditor.config.js中，对serverUrl进行配置：
            serverUrl: 'http://172.16.254.49:83/File/UEditor',   //地址管你们后端要去
            type: Object
        }
    },
    mounted() {
        const _this = this;
        this.editor = UE.getEditor('editor', this.config); // 初始化UE
        this.editor.addListener("ready", function () {
            _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
        });
    },
    methods: {
        getUEContent() { // 获取内容方法,包含html标签比如加粗<strong>11111</strong>
            console.log(this.editor.getContent())
            return this.editor.getContent()
        },
        getUEText(){//获取纯文本内容,会保留段落格式
            console.log(this.editor.getPlainTxt())
            return this.editor.getPlainTxt()
        }
    },
    destroyed() {
        console.log('destroy')
        this.editor.destroy();
    }
}
</script>

在index.vue中引入editor.vue组件

<template>
    <div>
        <Ueditor 
            :defaultMsg=defaultMsg 
            :config=config
            ref='ue'
        >
        </Ueditor>
    </div>
</template>
<script>
import Ueditor from './editor';
export default {
    data(){
        return{
            defaultMsg:'测试用',//富文本编辑器默认值
            config:{//富文本编辑器配置
                initialFrameWidth:1200,
                initialFrameHeight:400
            }
        }
    },
    components:{
        Ueditor
    }
}

</script>

 至此完成