vue集成ueditor

1、搭建项目

• 1、安装node
• 2、设置全局安装路径

npm config set cache "D:\app\nodejs\node_cache"
npm config set prefix "D:\app\nodejs\node_global"

• 3、设置环境变量(我的电脑右键属性->高级系统设置->环境变量)，Path：在末尾添加

;d:\app\nodejs\node_global

• 4、国内安装环境差，安装淘宝npm镜像：http://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 5、安装git，然后配置git

git config --global user.name "John Doe"
git config --global user.email johndoe@ example.com

• 6、安装vue-cli

npm install -g vue-cli

• 7、初始化项目

vue init webpack ue-example

• 8、初始化项目后，就可以开发啦

npm run dev

2、编写ueditor组件

• 1、引入 ue 文件夹至 static 目录下，在 src/main.js 中引入文件

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

• 2、在 static/ueditor/ueditor.config.js 中 var URL = window.UEDITOR_HOME_URL || getUEBasePath(); 之前添加

    window.UEDITOR_HOME_URL = '/static/ueditor/';// 获取 css 有用到
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

• 3、在 components 文件夹下添加 UE.vue 文件

<template>
  <div>
    <script :id="id" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      id: { // 唯一识别码，必须
        type: String,
        required: true
      },
      defaultMsg: { // 初始化内容
        type: String,
        default: ''
      },
      config: { // ue配置对象，如有需要可以提供由父组件传入
        type: Object
      }
    },
    watch: {
      defaultMsg: function(newText) { // 有可能数据是异步获得晚于 ueditor ready，避免导致初始化失败
        if(this.editor && this.editor.isReady) { // 确保 ueditor 已初始化完毕
          var newContent = this.editor.getContent()
          if(newText !== newContent) {
            this.editor.setContent(newText)
          }
        }
      }
    },
    mounted () {
      var that = this
      var configObj = { initialFrameHeight: 300, initialFrameWidth: 400 }
      function extend (to, _from) {
        for (var key in _from) {
          if(_from.hasOwnProperty(key)) {
            to[key] = _from[key]
          }
        }
        return to
      }
      extend(configObj, this.config || {}) //简单扩展配置
      this.editor = window.UE.getEditor(this.id, configObj) // 初始化UE
      this.editor.addListener('ready', function () {
        that.defaultMsg && that.editor.setContent(that.defaultMsg) // 初始化内容
      })
      this.editor.addListener('contentChange', function () {
        var newContent = that.editor.getContent()
        if(that.defaultMsg !== newContent) {
          that.$emit('contentChanged', newContent) // 内容改变及时更新父组件
        }
      })
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

• 4、在 components/HelloWordl.vue 中使用 UE

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <div style="width: 400px; margin: 0 auto;">
      <UE :default-msg="msg" id="editor" @contentChanged="contentChange"></UE>
    </div>
    <h2>Essential Links</h2>
    ...
  </div>
</template>

<script>
import UE from './UE.vue' // 引入组件
export default {
  name: 'HelloWorld',
  components: { UE }, // 注入组件
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    contentChange (val) { // 改变父组件数据
      this.msg = val
    }
  }
}
</script>

效果图：