laravel+vue项目中引入ueditor

1、把ueditor文件放在assets/js下目录中

2、把utf8-php中的其它文件复制到public下的js中

3、创建UEditor.vue 文件在ueditor/utf8-php下，写入以下代码

<template>　
    <div :id="id"></div>
</template>

<style scoped>
//引入css文件
</style>

<script>
    //引入相应的配置文件，具体路径请根据自己配置文件放置的路径以及公共组件定义的路径自行修改
    import './ueditor.config.js'
    import './ueditor.all.min.js'
    import './ueditor.parse.min.js'
    import './lang/zh-cn/zh-cn.js'

    export default {
        props: {},
        data() {
            return {
                id: Math.ceil(Math.random() * 100000) + 'editor'
            }
        },
        mounted() {
            // 获取编辑器实例化的对象
            this.editor = UE.getEditor(this.id,{
                initialFrameWidth: 700,//设置编辑器宽度
                initialFrameHeight: 700,//设置编辑器高度
                scaleEnabled: true,
            })
        },
        methods: {
            getUEContent() { // 获取内容方法
                return this.editor.getContent()
            }
        }
    }
</script>复制代码

4、在任意vue组件script标签中直接引入公共组件的UEditor.vue 文件，引入路径一定写正确

5、使用ueditor组件

<UE ref="ue" :defaultMsg='ruleForm.content'></UE>复制代码

6、调用编辑器组件的获取内容方法getUEContent()

 模版里定义一个button绑定getUEContent()方法
<button @click="getUEContent()">获取内容</button>
复制代码

7、注册getUEContent()方法：

methods: {
　　getUEContent() {
　　　　let content = this.$refs.ue.getUEContent();//在这里调用了子组件ueditor组件的getContent()方法
　　　　this.$notify({
　　　　　　title: '获取成功，可在控制台查看！',
　　　　　　message: content,
　　　　　　type: 'success'
　　　　});
　　　　console.log(content)
　　}｝
复制代码