安裝插件

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數(shù)據(jù)
               msg: '',
                config: {
                    UEDITOR_HOME_URL: '/umedit/',// 需要令此處的URL等于對應 ueditor.config.js 中的配置。
                    initialFrameWidth: 1384,
                    initialFrameHeight: 350,
                    // 編輯器不自動被內(nèi)容撐高
                    autoHeightEnabled: false,
                    // 上傳文件接口   this.API.BASE_SERVER_URL自己后臺路徑 umedit是復制vue中的umedit
                    serverUrl: this.API.BASE_SERVER_URL+'/umedit/jsp/controller.jsp',
                },

image.png

//調(diào)用圖片上傳方法  
  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拿到富文本內(nèi)容