vue2.0中集成并使用ueditor

最近有项目需要使用编辑器，就找了一款百度的ueidtor编辑器，第一次用各种不会，所以记录一下

下面的链接就是ueditor的前后端的配置说明和API等

链接: ueidtor的API

下载ueidtor

下载最新版的1.5.0版本，下载链接已经放在下面了

链接: 下载ueidtor

在这里插入图片描述

随便下载到哪里，因为我们最终要的也不是这个文件，因为ueditor-dev-1.5.0 jsp版本是没有jsp文件的，需要自己再去下载

而ueditor-dev-1.4.3，是有jsp文件的，所以就不需要下载，可以直接下载到static文件中，其他的版本没有测试过不知道

下载好后，在下载目录敲 cmd 然后回车弹出小黑窗（也就是领命令窗口），然后输入 npm install 开始下载环境依赖

因为我已经弄好了，就截不了屏，所以就不放图了

然后在执行 grunt 命令，如果提示没有此命令，就需要执行 npm install -g grunt-cli 命令安装即可

安装完后在执行 grunt 命令，这时我们下载的UEditor文件中就会出现一个list的文件夹
在这里插入图片描述

然后直接将list文件夹的所以文件复制到vue的static文件夹下面即可
在这里插入图片描述

引入项目

文件夹可以自己改名，放好后就可以来引入项目

我这里使用的组件的形式来做

在子组件中先引入js文件，顺序是不能错的，不然控制台会报错

组件销毁的时候，要销毁 UEditor 实例，下次进入页面才能重新加载出编辑器

ueditor子组件

<template>
    <div :id="id" type="text/plain"></div>
</template>
<script>
import '../../../../../static/ueditor/ueditor.config.js'
import '../../../../../static/ueditor/ueditor.all.min.js'
import '../../../../../static/ueditor/lang/zh-cn/zh-cn.js'
import '../../../../../static/ueditor/ueditor.parse.min.js'

export default {
    name: 'UE',
    data() {
        return {
            editor: null
        }
    },
    props: {
    	// 初始化内容和实例化编辑器的名称id，由父组件传入，这里也会有一个默认的初始值
        defaultMsg: {
            type: String,
            default: '请输入内容'
        },
        id: {
            type: String,
            default: `ue${Math.random(0, 100)}`
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.editor = UE.getEditor(this.id); // 初始化UE
            this.editor.addListener("ready", () => {
                this.editor.execCommand('insertHtml', this.defaultMsg);
                // 确保UE加载完成后，放入内容
                this.editor.focus() 
            })
        })
    },
    methods: {
        // 获取内容方法
        getUEContent() { 
            return this.editor.getContent()
        },
        // 清空编辑器内容
        clearContent() { 
            return this.editor.execCommand('cleardoc');
        },
    },
    // 生命周期函数，组件销毁前调用的方法
    beforeDestroy() {
        // 组件销毁的时候，要销毁 UEditor 实例，下次进入页面才能重新加载出编辑器
        if (this.editor !== null && this.editor.destroy) {
            this.editor.destroy();
        }
    }
}
</script>
<style scoped>

</style>

在要使用编辑器的组件中引入子组件

父组件怎么调用子组件的方法，this.$refs.ue.getUEContent();，ue是UE子组件的ref的值，getUEContent是子组件的方法

<template>
    <div>
        <div class="ueditorStyle">
        	// 传入编辑器的实例化名称和初始值
            <UE :id="ueidtorName" ref="ue" :defaultMsg="val"></UE>
        </div>
        <div class="btn">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="gettext">发布</el-button>
            <el-button @click="destroyed">清空</el-button>
        </div>
    </div>
</template>
<script>
import UE from './components/ueditor.vue'
export default {
    name: "addposteditor",
    components: { UE },
    data() {
        return {
            ueidtorName : 'ueditor',
            val: '请输入内容',
            editorContent: '',
        }
    },
    methods: {
        gettext() {
        	// 父组件调用子组件的方法
            let content = this.$refs.ue.getUEContent();
            // 判断是否输入内容
            if (content == '') {
                this.$message.error('请输入内容！');
            } else {
                this.editorContent = content;
                console.log(this.editorContent);
                this.$message({
                    message: '发布成功',
                    type: 'success'
                });
                this.$router.push({ path: '/sms/postManagement' });
            }
        },
        destroyed() {
        	// 父组件调用子组件的方法
            this.$refs.ue.clearContent();
        },
        cancel(){
            this.$router.push({ path: '/index' });
        },
    },
}
</script>
<style scoped>
.ueditorStyle {
    margin: 30px 0px 0px 120px;
} 

.btn {
    margin: 30px 0 0 1380px;
} 
</style>