nx-admin 引入vue-ueditor-wrap

1.安装

npm i vue-ueditor-wrap
# 或者 
yarn add vue-ueditor-wrap

2.放入静态资源并配置

首先把官网下载的Ueditor资源，放入静态资源src/static中。如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入项目的 public 目录下。

修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：

3.引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS
//你也可以通过直接引入 CDN 链接的方式来使用，它会暴露一个全局的 

<script src="https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js">script>

4.注册组件

components: {
  VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

5.v-model绑定数据

"msg">
data () {
  return {
    msg: '
Vue + UEditor + v-model双向绑定'
  }
}

6.config配置


"msg" :config="myConfig">
data () {
  return {
    msg: '
Vue + UEditor + v-model双向绑定',
    myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
      UEDITOR_HOME_URL: '/static/UEditor/'
    }
  }
}

7.获取实例

"ready">
methods: {
  ready (editorInstance) {
    console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
  }
}

8.组件销毁

"true">

9.注意事项

1.样式表报错：because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
　　解决：全局搜索dialogbase.css文件，找到utils.loadFile方法，注释rel:"stylesheet"即可

2.全局定义指定后端服务器请求路径，以及项目目录路径，因为它会覆盖ueditor.congfig.js的配置路径。

　　解决：在store定义全局变量存放域名，以及路径名称

//modules/https
const https = {
    state: {
      https: 'http://172.32.1.118:8090',//统一请求后台服务器接口
      ueditorUrl:'/sampweb/static/ueditor/',//服务器访问的目录路径
      ueditorUrl:'/static/ueditor/', //本地访问的目录路径
    }
}
    
export default https

组件使用
    
class="editor-container">
            "ready" v-model="content" :config="config">
    

    export default{
        name:'',
        data(){
            return{
                content:'vue-ueditor-wrap', //数据双向绑定
                config: {
                      serverUrl:'',
                      UEDITOR_HOME_URL: '',
                },
                editorInstance:'' //编辑器实例
           }
        },
        created(){
            this.config.serverUrl = this.$store.getters.https+'/knowledge/controller.jsp'
            this.config.UEDITOR_HOME_URL = this.$store.getters.ueditorUrl
        },
        methods:{
            ready(editorInstance){ //实例化编辑器 得到ueditor的所有实例方法
                this.editorInstance = editorInstance
            },
            getContentTxt(){ //获取编辑器纯文本
                var getContentTxt = this.editorInstance.getContentTxt()
            }
    }

3.上传图片：图片有中文名称不显示问题。

解决：后台配置的config.json中"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
如果后缀加{filename}则会出现乱码问题，/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */

4.后端配置问题
　　1.config.json
　　　　"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */,
　　　　"imageUrlPrefix": "", /* 图片访问路径前缀 */
　　2.统一请求服务器路径。也就是上传路径