vue-ueditor-wrap rich text editor.

1. Install the plugin.

npm install:

npm i vue-ueditor-wrap

yarn installation:

yarn add vue-ueditor-wrap

2. Download the latest compiled UEditor and put it in the public directory.

UEditor resources:

https://github.com/HaoChuan9421/vue-ueditor-wrap-demo

 3. Import and register the VueUeditorWrap component.

import VueUeditorWrap from 'vue-ueditor-wrap';
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

 4. Page citations.

<vue-ueditor-wrap
    ref="editor"
    v-model="dataForm.f_Content"
    :config="editorConfig"
    :destroy="true"
    />
</el-form-item>

data(){
   return{
  // ueditor配置
      editorConfig: {
        autoHeightEnabled: true, // 自动变高
        autoFloatEnabled: true,
        initialContent: "请输入内容",
        autoClearinitialContent: true,
        initialFrameWidth: "50%", // 初始化宽
        initialFrameHeight: 200, // 初始化高
        // BaseUrl: "",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口） - 修改成自己地址
        serverUrl: "http://35.201.165.105:8000/controller.php",
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "/UEditor/", // 重要重要重要重要重要重要重要重要重要 必须配置好径!!!
      },
   }
}

Problems encountered:

1. The upload file address serverUrl needs to be configured, otherwise an error will be reported.

2. The editor will have a hierarchical problem, and the solution is as follows:

Global style settings:

.v-modal {
  z-index: 99 !important;
}

Adjust according to the corresponding page.

.el-dialog__wrapper {
  z-index: 999 !important;
}