富文本编辑器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('<p>hello!</p>');
3. 追加编辑器内容:
    ue.setContent('<p>new text</p>', 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。

<template>
  <div class="set">
    <div class="btn-groups">
      <button @click="save">保存编辑</button>
    </div>
    <div id="ueditor" type="text/plain"></div>
  </div>
</template>

引入相关依赖文件

  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)进行数据接收。注:此处我初始化了几条数据。

<template>
  <div class="show-data">
    <ul>
      <li class="show-data-list" v-for="(item,index) in showDataArr" >
        <h6>我是第{{index}}条数据</h6>
        <p v-html="item.data"></p>
      </li>
    </ul>
  </div>
</template>
export default {
    name: 'show-data',
    data () {
      return {
          showDataArr:[
            {
              data:`<ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p><strong>啦啦</strong></p></li><li><p><strong>我是一</strong>个人</p></li><li><p>我是一座神<br/></p></li></ul>`
            },
            {
              data:`<ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p>下雨了</p></li><li><p>打雷了</p></li><li><p>下雪了</p></li><li><p>吃饭了<br/></p></li></ol>`
            },
            {
              data:`<p><strong><span style="font-size: 24px;">大家好:</span></strong></p><p><strong><span style="font-size: 24px;">&nbsp; &nbsp;<span style="font-size: 24px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">今天是2017年6月18日</span>。<br/></span></strong></p><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p><span style="font-size: 24px;">早饭<font face="黑体, SimHei">喝了一个黄小蕉;</font></span></p></li><li><p><em><span style="font-size: 24px;"><font face="黑体, SimHei">午饭准备吃筋头巴脑</font></span></em><span style="font-size: 24px;"><font face="黑体, SimHei">;</font></span></p></li><li><p><span style="font-size: 24px;"><font face="黑体, SimHei">晚饭?</font></span><span style="font-size: 24px; text-decoration: underline;"><font face="黑体, SimHei">吃啥呢?</font></span><span style="font-size: 24px;"><font face="黑体, SimHei">这是一个值得思考的问题。</font></span></p></li></ol><p><span style="font-size: 24px;"><font face="黑体, SimHei"></font></span><strong><span style="font-size: 24px;"><br/></span></strong></p>`
            },{
              data:`<p><span style="font-family: 宋体, SimSun;"><strong><span style="font-size: 24px;">大家好</span></strong></span><span style="font-size: 24px;">:</span></p><ul class=" list-paddingleft-2" style="list-style-type: circle;"><li><p><span style="font-size: 20px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">欢迎来学习web前端开发</span><span style="font-size: 20px;">;</span></p></li></ul><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p><span style="font-size: 20px; font-family: &quot;andale mono&quot;;">欢迎来学习web前端开发;</span></p></li></ul><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p><span style="font-size: 20px;">欢迎来学习web前端开发;</span></p></li></ul><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p><strong><span style="font-size: 24px;">我是前端三剑客之一的html;</span></strong></p></li><li><p><em>我是前端三剑客之一的css</em>;<span style="background-color: rgb(255, 0, 0);"></span></p></li><li><p><span style="text-decoration: underline;">我是前端三剑客之一的JavaScript。</span></p></li></ol><ol class=" list-paddingleft-2" style="list-style-type: lower-roman;"><li><p>我是前端三剑客之一的html;</p></li></ol><ol class=" list-paddingleft-2" style="list-style-type: upper-roman;"><li><p><span style="background-color: rgb(255, 0, 0);">我是前端三剑客之一的css;</span></p></li><li><p>我是前端三剑客之一的JavaScript。</p></li></ol><ol class=" list-paddingleft-2" style="list-style-type: upper-alpha;"><li><p><span style="background-color: rgb(255, 255, 0);">我是前端三剑客之一的html</span>;</p></li><li><p>我是前端三剑客之一的css;</p></li></ol><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p>?我是前端三剑客之一的JavaScript。</p></li></ol><p><br/></p>`
            }
          ]
      }
    },
    mounted(){
      const _this = this;
      Event.$on('seted', (val) => {
          _this.showDataArr.unshift({
              data:val
          })
//        console.log(this.showDataArr);
      });
    }
  }

三、效果展示

本文github地址

推荐阅读更多精彩内容

  • 1.背景介绍 在做Web应用时,经常会进行富文本编辑,常用的富文本编辑器有很多,比如CuteEditor、CKEd...
    维克拉玛蒂亚阅读 373评论 0 0
  • 大家好,我是IT修真院成都分院第三期的学员王奎智,一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下,修真院...
    一个要娶张静初的人阅读 6,777评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 89,196评论 13 123
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 20,245评论 7 121
  • UEditor的简单使用 在Java Web阶段和SSM框架阶段,我们的课程设计中都会使用到富文本编辑器,目前流行...
    胖先森阅读 1,698评论 0 8