vue项目使用百度富文本UEdtior

一、下载UEditor

我下载的是1.4.3.3 utf-8 jsp 版本 下载链接：https://ueditor.baidu.com/web...

将下载好的文件解压到 /static/urditor 目录，如图：

二、创建组件 UEditor

组件内容如下

<template>
    <div class="ueditor" ref="ueditor">
        <script :id="id" type="text/plain"></script>
    </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'
import { baseURL } from '@/config/const'
import { getToken } from '@/config/auth'

export default {
    name: 'UEditor',
    data () {
        return {
            editor: null,
            flag: true,
            baseURL: baseURL
        }
    },
    props: {
        value: {//文本内容
            type: String
        },
        config: {//单独设置
            type: Object,
            default: ()=> {
                return {
                    initialFrameWidth: null,
                    initialFrameHeight: 350,
                    UEDITOR_HOME_URL: 'static/ueditor/'
                }
            }
        },
        id: {
            type: String,
            default: ()=> {
                return 'editor' + new Date().getTime();
            }
        }
    },
    computed: {
        DefaultConfig() { //默认设置
            let obj = this.config;
            let serverUrl = this.baseURL + '/file-service/v1/ueditorUpload?' + 'token=' + getToken(); //服务器地址
            return {
                serverUrl,
                ...obj
            }
        }
    },
    created() {
    },
    mounted() {
        this.initUEditor()
    },
    watch: {
        'value': function (val) {
            if(this.flag) {
                this.editor.setContent(val)
            }
            this.flag = true
        }
    },
    methods: {
        initUEditor() {
            this.$nextTick(() => {
                this.editor = UE.getEditor(this.id, this.DefaultConfig); // 初始化UE
                this.editor.addListener("ready", () => {
                    if (this.value == null) {
                        this.editor.setContent('');
                    } else {
                        this.editor.setContent(this.value);
                    }
                });
                this.editor.addListener("contentChange", () => { //监听内容变化
                    this.getUEContent();
                })
            })
        },
        getUEContent() { // 获取内容方法
            this.flag = false;
            let content = this.editor.getContent();
            // content = content.replace(/<p([\s\S]*?)<\/p>/g, "<div$1</div>"); // 将默认p标签设置为div标签
            this.$emit("getUEContent", content)
        }
    },
    destroyed() {//退出后销毁
        this.editor.destroy();
    }
}
</script>

<style scoped lang="scss">
    .ueditor { // 防止外部样式影响变形
        line-height:normal;
    }
</style>

三、组件的使用

......
<el-form-item label="通知内容" prop="content">
    <div>
        <UEditor :value="form.content" @getUEContent="getUEContent"></UEditor>
    </div>
</el-form-item>
......
getUEContent(value) { // 勉强实现v-model效果
    this.form.content = value;
},
......

使用方法如上，想实现v-model的效果，没有实现，欢迎补充一下

四、上线问题

最后还有个需要注意的是，上线到生产环境后，如果遇到富文本加载不出来，路径报错的问题，那需要更改一下配置：

1. ueditor.config.js文件中首先配置一下 window.UEDITOR_HOME_URL = '';

window.UEDITOR_HOME_URL = '';
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

1. 组件中的路径需要配置成 UEDITOR_HOME_URL: 'static/ueditor/'

props: {
    ......
    config: {//单独设置
        type: Object,
        default: ()=> {
            return {
                initialFrameWidth: null,
                initialFrameHeight: 350,
                UEDITOR_HOME_URL: 'static/ueditor/'
            }
        }
    },
    ......
}

https://juejin.im/post/5c6e78...