vue集成百度UEditor富文本编辑器

vue集成百度UEditor富文本编辑器

1. 百度下载插件, 整个文件夹, 放入static 里面

2. main.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'

3. 组件: Ctrl+c Ctrl+v

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      },
      id: {
        type: String
      },
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor(this.id, this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        //延时 lkw20190307 添加, 防止页面加载富文本编辑器来不及赋值/或网络延时加载不上
        setTimeout(function () {
          _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
        }, 300)
        
      });
      console.log("上传这堆错误不用理会，上传接口需自行开发配置");
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      },
      getUEContentTxt() { // 获取纯文本内容方法
        return this.editor.getContentTxt()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

4. 使用, 在需要的页面使用

(1) 引入插件

import UE from '../../components/ue/ue.vue';

components: {UE},

(2) 表现层

(3) 定义初始值, 及组件宽高等(在data里面定义)

config: {
	initialFrameWidth: null,
	initialFrameHeight: 350
},
ue1: "ue1", // 不同编辑器必须不同的id
ue2: "ue2",
ue3: "ue3",

(4) 富文本值的获取, methods中:

/**全富文本 */
    getUEContent(ue) {
      let content = this.$refs.ue.getUEContent(); // 调用子组件方法
      this.$notify({
        title: '获取成功，可在控制台查看！',
        message: content,
        type: 'success'
      });
    },
    getUEContentTxt() {
      let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
      this.$notify({
        title: '获取成功，可在控制台查看！',
        message: content,
        type: 'success'
      });
    },

(5) 以formate提交为例, 获取多个富文本的值

if(key == 'abstract') {
	formData.append('abstract', this.$refs.ue.getUEContent()); // 调用子组件方法, 获取课程介绍富文本值
} else if(key == 'feature') {
	formData.append('feature', this.$refs.ue2.getUEContent()); // 调用子组件方法, 获取课程介绍富文本值
 } else if(key == 'teacher') {
	formData.append('teacher', this.$refs.ue3.getUEContent()); // 调用子组件方法, 获取课程介绍富文本值
 }