Nuxt+Ueditor 集成 （前后端分离项目）

1. 下载UEditor官网jsp版本的包，下载完成解压之后得到一个utf8-jsp的文件夹：
   除了jsp的文件夹外（jsp用于后端），其余的文件和文件夹复制到static存放静态文件的目录里面，
   

2. 引入 （可以在配置文件全局引，或者单独引）

   在nuxt.config.js配置文件引入：

   	script: [
         { src: '/ueditor/ueditor.config.js', type: 'text/javascript', charset: 'utf-8' },
         { src: '/ueditor/ueditor.all.min.js', type: 'text/javascript', charset: 'utf-8' },
         { src: '/ueditor/ueditor.parse.min.js', type: 'text/javascript', charset: 'utf-8' },
         { src: '/ueditor/lang/zh-cn/zh-cn.js', type: 'text/javascript', charset: 'utf-8' },
       ],
   

   注意：
   

3. 封装ueitor组件统一调用：
   在components文件夹下，创建Ueditor组件，复制下面代码

   <template>
     <div>
       <script id="editor" type="text/plain"></script>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       id: {
         type: String,
         default: () => {
           return ''
         }
       },
       config: {
         type: Object,
         required: true,
       }
     },
     data () {
       return {
         editor: null
       }
     },
     mounted () {
       // 初始化UE
       const _this = this
       // console.log(window.UE, 'window.UE')
       this.editor = window.UE.getEditor('editor', _this.config)
     },
     methods: {
       getUEContent () {
         return this.editor.getContent()
       },
     },
     destoryed () {
       this.editor.destory()
     },
   }
   </script>
   
   

   页面调用：

   <template>
     <div class="container">
       <button @click="getTXT">获取内容</button>
       <Ueditor ref="ueditor" :config="config" />
     </div>
   </template>
   
   <script>
   import Ueditor from '~/components/Ueditor.vue'
   export default {
     components: {
       Ueditor,
     },
     data () {
       return {
         config: {}
     },
     methods: {
     	// 获取文档内容
       getTXT () {
         alert(this.$refs.ueditor.getUEContent())
       }
     }
   }
   </script>
   
   

4. ueditor.config.js配置服务器统一请求接口路径（需要修改自己的路径）