Vue-ueditor-wrap百度富文本Vue-cli3集成

安装插件

npm i vue-ueditor-wrap --save

下载文件

vue-ueditor-wrap 作者修定版（https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads）

这里我选择的是utf-8-jsp

下载完成的压缩包，修改文件名为 umedit ，并放置项目目录下的public的目录中

image.png

在后台也需要放置

image.png

后端添加json解析和ueditor

        <dependency>
            <groupId>com.fmjava</groupId>
            <artifactId>json</artifactId>
            <version>1.0.0</version>
        </dependency>

        <dependency>
            <groupId>com.fmjava</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.0.0</version>
        </dependency>
    </dependencies>

组件引用

    import VueUeditorWrap from 'vue-ueditor-wrap' // 引用

  // 注册组件
        components: {
            VueUeditorWrap
        },

//html
  <vue-ueditor-wrap ref="ue" @ready="ready" v-model="msg" :config="config"></vue-ueditor-wrap>

//data数据
               msg: '',
                config: {
                    UEDITOR_HOME_URL: '/umedit/',// 需要令此处的URL等于对应 ueditor.config.js 中的配置。
                    initialFrameWidth: 1384,
                    initialFrameHeight: 350,
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 上传文件接口   this.API.BASE_SERVER_URL自己后台路径 umedit是复制vue中的umedit
                    serverUrl: this.API.BASE_SERVER_URL+'/umedit/jsp/controller.jsp',
                },

image.png

//调用图片上传方法  
  ready(ue) {
                let vm = this;
                window.UE.Editor.prototype._bkGetActionUrl = window.UE.Editor.prototype.getActionUrl
                window.UE.Editor.prototype.getActionUrl = function (action) {
                    if (action === 'upload/uploadImage') {
                        return vm.API.BASE_SERVER_URL+'/upload/uploadImage'
                    } else {
                        return this._bkGetActionUrl.call(this, action)
                    }
                }
                ue.addListener('ready', () => {
                    this.$emit('getUe', this.msg)
                })
            },

通过this.$refs.ue.value拿到富文本内容