vue项目使用百度富文本UEdtior

一、下载UEditor

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

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

二、创建组件 UEditor

组件内容如下

三、组件的使用

......

    

        
    

......
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...