在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的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，注掉或者删掉。因为本文中不涉及图片显示。项目路径如下图：
[图片上传失败...(image-c919a3-1535001222907)]
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;"> <span style="font-size: 24px; font-family: 微软雅黑, "Microsoft YaHei";">今天是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: 微软雅黑, "Microsoft YaHei";">欢迎来学习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: "andale mono";">欢迎来学习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);
});
}
}
三、效果展示
image.png
网友评论