富文本编辑器Ueditor如何在Vue中使用？

在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。

ps: 在vue中使用Ueditor有两种方法，其一是通过npm install vue-ueditor安装包的形式，其二是在官网下载相关文件放在vue项目的静态资源（static）下。

一、Ueditor介绍——官方网站

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器。本文下载的版本为[1.4.3.3 Jsp utf-8 版本]下载地址

常用方法

1. 实例化编辑器到id为 container 的 dom 容器上：
   var ue = UE.getEditor('container');
2. 设置编辑器内容：
    ue.setContent('
hello!
');
3. 追加编辑器内容：
    ue.setContent('
new text
', true);
4. 获取编辑器html内容：
    var html = ue.getContent();
5. 获取纯文本内容：
    ue.getContentTxt();
6. 获取保留格式的文本内容：
    ue.getPlainTxt();
7. 判断编辑器是否有内容：
    ue.hasContents();
8. 让编辑器获得焦点：
    ue.focus();
9. 让编辑器失去焦点
    ue.blur();
10. 判断编辑器是否获得焦点：
    ue.isFocus();
11. 设置当前编辑区域不可编辑：
    ue.setDisabled();
12. 设置当前编辑区域可以编辑：
    ue.setEnabled();
13. 隐藏编辑器：
    ue.setHide();
14. 显示编辑器：
    ue.setShow();
15. 清空内容：
    ue.execCommand('cleardoc');
16. 读取草稿箱：
    ue.execCommand('drafts');
17. 清空草稿箱：
  ue.execCommand('clearlocaldata');

二、Vue中使用

1. 用vue脚手架创建一个项目。

2. 配置下载好的Ueditor文件。

将下载好的文件解压后放到static文件夹内。找到ueditor.config.js文件并打开，找到serverUrl，注掉或者删掉。因为本文中不涉及图片显示。项目路径如下图：

3. 配置Vue

A. 编写SetUeditor.vue文件

这里就不叙述vue-router和组件了。首先在setUeditor.vue中设置一个容器，并定义id。

引入相关依赖文件

  import '../../static/utf8-jsp/ueditor.config';
  import '../../static/utf8-jsp/ueditor.all';
  import '../../static/utf8-jsp/lang/zh-cn/zh-cn';
  import Event from '../assets/js/bus.js';//这个是兄弟组件中传输数据的。在本人其他文章中有介绍

定义一个ue变量用来保存ueditor对象。在钩子函数mounted 中调用Editor实例，并进行配置，第一个参数为template中容器的id名。第二的json中可进行多项所需的配置。在methods中定义一个获取ueditor数据的方法，并传递到showUeditor.vue中进行展示。

export default {
    name: 'set',
    data () {
      return {
        ue: ''
      }
    },
    mounted () {
      this.ue = UE.getEditor('ueditor',{
        BaseUrl: '',
        UEDITOR_HOME_URL: 'static/utf8-jsp/',
        toolbars: [
          ['fullscreen', 'source', 'undo', 'redo'],
          ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
        ]
      })
    },
    methods: {
      save(){
        let ueditordata = UE.getEditor('ueditor').getContent();
        Event.$emit('seted', ueditordata);
      }
    }
  }

B. 编写ShowUeditor.vue文件

Event.$on(event,function)进行数据接收。注：此处我初始化了几条数据。

export default {
    name: 'show-data',
    data () {
      return {
          showDataArr:[
            {
              data:`
啦啦
我是一个人
我是一座神
`
            },
            {
              data:`
下雨了
打雷了
下雪了
吃饭了
`
            },
            {
              data:`
大家好：
   今天是2017年6月18日。
早饭喝了一个黄小蕉；
午饭准备吃筋头巴脑；
晚饭？吃啥呢？这是一个值得思考的问题。

`
            },{
              data:`
大家好：
欢迎来学习web前端开发;
欢迎来学习web前端开发;
欢迎来学习web前端开发;
我是前端三剑客之一的html；
我是前端三剑客之一的css;
我是前端三剑客之一的JavaScript。
我是前端三剑客之一的html；
我是前端三剑客之一的css;
我是前端三剑客之一的JavaScript。
我是前端三剑客之一的html；
我是前端三剑客之一的css;
?我是前端三剑客之一的JavaScript。

`
            }
          ]
      }
    },
    mounted(){
      const _this = this;
      Event.$on('seted', (val) => {
          _this.showDataArr.unshift({
              data:val
          })
//        console.log(this.showDataArr);
      });
    }
  }

三、效果展示

本文github地址