Vue 项目中如何添加 UEditor？掌握这些窍门让你轻松上手

一次偶然的需求，让我遇见了UEditor

我在Github上翻了好几个Vue项目里的富文本编辑器插件，可惜都不太合心意。最后挑来挑去选了个叫UEditor的，真的挺好使！

听说过UEditor么？要把它装到Vue项目里可不轻松，得花时间琢磨每个设置和部件儿。虽然折腾了好几次，但也长进了不少新知识。下面就教你怎么给Vue项目添个UEditor，不过还得注意几点儿小窍门！

下载UEditor源码并配置

到官网上下载个PHP版的UE代码包，扔到我们项目的静态文件夹/ue里就可以。操作容易，而且还能保持Webpack不破坏原始布局

终于找到了ueeditor.config.js这个重要文件！这个是控制UEditor的关键。按照需求，我把window.UEDITOR_HOME_URL和编辑器大小这些基础设置都调好了。现在我已经学会如何熟练操控UEditor！

window.UEDITOR_HOME_URL = "/static/UE/";   //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

集成UEditor到Vue项目中

在主文件/src/main.js上装上UEditor，稍微调下参数，Vue项目就能搞定~

,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
,initialFrameHeight:320 //初始化编辑器高度,默认320

开发UEditor的Vue组件

说到项目，当然少不了好用的工具。在我们这儿，就用上了UEditor，整出了个叫作UE.vue的好东西。这货不仅能满足我们的需求，还能自由定制。简单点说，就是一件神器般的组件化编程利器！

//ueditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

在页面中使用UE.vue组件

搞定了Vue.vue组件之后，想用富文本编辑器的话，直接OG就行。超级简单的立马就能看到网页上的UEditor编辑框嗨皮地跑起来感觉这自定义组件真是太好用了，简直完美

服务端配置的重要性

  

    
  

  export default {
    name: 'ue',
    data () {
      return {
        editor: null
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      this.editor = window.UE.getEditor('editor', this.config);
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }

搞UEdit集成的时候，传输不了数据了，使劲儿捣鼓了好久才发现服务器请求接口设置错了。马上在ueditor.config.js里改了serverUrl这一项，终于解决！就为了这么点儿事儿头疼欲裂，真明白了服务器配置的重要性了！

总结与展望

搞定了在Vue项目里加入UEditor，学习到一些新知识，发现做前端要留意很多小细节。多亏了这个神器，项目功能一下子强大起来，用户体验也棒极了！

  

    
    显示编辑器内容
    
{{dat.content}}
  

  import Uediter from '@/components/UE.vue';
  export default {
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 800,
            initialFrameHeight: 320
          }
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      }
    },
    components: {
      Uediter
    },
  }

你们有用过编辑器吗？遇到过什么困扰吗？快来这里讲讲！别忘了顺手点赞哦，把好事儿传出去！