vue2.0项目中使用Ueditor富文本编辑器示例

1、首先需要下载Ueditor富文本编辑器：

下载地址如下：https://ueditor.baidu.com/website/download.html

该例子使用的是1.4.3.3 PHP  UTF-8版本 如图所示：

 

2、将下载的Ueditor文件放入static中ue文件夹下， 如图所示：

修改ueditor.config.js文件，修改代码如下所示：

 window.UEDITOR_HOME_URL = '/static/ue/'

修改后如图所示：

3、 在vue项目中的main.js中引入以下js文件，如代码所示：

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'

4、开发公共组件，可设置填充内容defaultMsg，配置信息config(宽度和高度等)，并提供获取内容的方法。

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data () {
    return {
      editor: null
    }
  },
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    }
  },
  mounted () {
    const _this = this
    this.editor = window.UE.getEditor('editor', this.config) // 初始化UE
    // 注意： 这里不能直接使用UE,必须使用window.UE
    this.editor.addListener('ready', function () {
      _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容。
    })
  },
  methods: {
    getUEContent () { // 获取内容方法
      return this.editor.getContent()
    }
  },
  destroyed () {
    this.editor.destroy()
  }
}
</script>

5、使用方式，当我们需要使用富文本编辑器时，直接调用公共组件即可

<template>
  <div class="ueditor">
    <div class="info">UE编辑器示例<br>需要使用编辑器时，调用UE公共组件即可。可设置填充内容defaultMsg，配置信息config(宽度和高度等)，可调用组件中获取内容的方法。</div>
    <button @click="getUEContent()">获取内容</button>
    <div class="editor-container">
      <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
    </div>
  </div>
</template>
<script>
import UE from './ueditor.vue'
export default {
  data () {
    return {
      defaultMsg: '这里是UE测试',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      }
    }
  },
  components: {UE},
  methods: {
    getUEContent () {
      let content = this.$refs.ue.getUEContent()
      this.$notify({
        title: '获取成功，可在控制台查看！',
        message: content,
        type: 'success'
      })
      console.log(content)
    }
  }
}
</script>

<style>
.info{
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
</style>

6、这样就OK啦！！！！！ 效果如下：

7、但是此时上传发现控制台展示上传功能还无法使用，其他就给后台啦 ！！