在我们项目中,有些时候需要使用富文本编辑器。本文将以百度开发的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,注掉或者删掉。因为本文中不涉及图片显示。项目路径如下图:
[图片上传失败...(image-c919a3-1535001222907)]
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)进行数据接收。注:此处我初始化了几条数据。
-
我是第{{index}}条数据
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);
});
}
}