vue项目集成百度ueditor富文本编辑器

这里用 1.4.3.3 PHP版本为例 UTF-8版
官网下载地址：https://ueditor.baidu.com/website/download.html

一、引入ueditor

1. 下载完毕后将文件夹改名ueditor为并放入static 文件夹中
2. 打开 vue 项目的 src/main.js 文件，导入以下文件

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js' 
import '../static/ueditor/lang/zh-cn/zh-cn.js' 
import '../static/ueditor/ueditor.parse.min.js' 
import '../static/ueditor/themes/default/css/ueditor.css'

二、修改ueditor中的原文件ueditor.config.js

1. 设置文件路径

window.UEDITOR_HOME_URL = "/static/ueditor/";   //修改地方1：设置文件路径

2. 服务器统一请求接口路径

serverUrl: '',                             //修改地方2：文件上传API接口

三、在 src/components/ueditor 目录下创建 index.vue 文件，作为编辑器组件文件

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'ueditor',
    data () {
      return {
        editor: null
      }
    },
    props: ['value','config'],
    mounted () {
      const _this = this
      window.UE.delEditor('editor')  // 删除重新加载，确保富文本正常显示
      this.editor = window.UE.getEditor('editor', this.config)   // 初始化UE
      this.editor.addListener('ready', function () {               
        _this.editor.setContent(_this.value)                     // 载完成后，放入内容      
      })
    },
    methods: {
      getUEContent () {                                          // 获取编辑器内容方法
        return this.editor.getContent()
      },
      destroyed () {                                               // 销毁编辑器
        this.editor.destroy()
      }
    }
  }
</script>

四、使用编辑器，在 src/components/ 目录下创建 test.vue 文件

<template>
  <div>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ued"/>  <!-- 编辑器 -->
    <input type="button" value="获取编辑器内容" @click="getContent">  
  </div>
</template>
<script>
  import Uediter from '@/components/ueditor/'
  export default {
    components: {Uediter},
    data () {
      return {
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高 
            initialFrameWidth: null,
            initialFrameHeight: 350
          }   
        }
      }
    },
    methods: {
      getContent () {
        console.log(this.$refs.ued.getUEContent())
      }
    }
  }
</script>