在前端开发的项目中，难免会遇到需要在页面上集成一个富文本编辑器。那么，如果你有这个需求，希望可以帮助到你。
vue是前端开发者所追捧的框架，简单易上手，但是基于vue的富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使用。效果图如下
前端精品教程：百度网盘下载
废话不多说。
1、使用vue-cli构建一个vue项目。然后下载UEditor源码，地址
把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件，打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面的ueditor.config.js文件找到serverUrl把这行代码注释了。这个代码是用来上传图片的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。
2、在.vue文件中引入主要js文件
前端精品教程：百度网盘下载
|
1
2
3
|
import ‘../../static/utf8-jsp/ueditor.config
'
import ‘../../static/utf8-jsp/ueditor.all'
;
import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn';
|
3、在data中申明一个变量存储UEditor的实例方便在vue的其他地方使用，然后申明一个变量存储手动获取的编辑器里面的内容，再什么一个变量存储初始化时要写入编辑器的内容。三个变量。如果操作得当。可以减少变量的时候。这是笨办法
4、在vue的mounted钩子函数中调用编辑器的方法生成实例存储到刚刚申明的变量中，在实例中传入参数。第一个是id，id是生成编辑器的div的id。第二个参数是一个对象。对象内容是对编辑器的配置。如资源访问路径，toolbars内容配置。
5、在html部分写一个div标签
<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>
6、然后配置资源路径。在实例化的时候传入的参数里。第二个参数是一个对象。内容包括路径。
前端精品教程：百度网盘下载
|
1
2
3
4
|
this
.ue = UE.getEditor(
'editor'
,{
BaseUrl:
''
,
UEDITOR_HOME_URL:
'static/utf8-jsp/'
,
});
|
这个UEDITOR_HOME_URL就是配置编辑器自己访问自己所需要的依赖的路径。设置到存放的文件下utf8-jsp是编辑器文件的更目录。目录不一样可自行更改
7、然后保存。就可以在界面上显示一个完整的富文本编辑器
8、如果要获取内容则使用在data里面申明的编辑器实例在vue中this.实例调用方法getContent()可以获取到内容
9如果要设置内容则调用：setContent('欢迎使用ueditor');
更多方法参考官方文档。
10、文档内容属于个人踩坑的心得。如有错误。请留言指出。谢谢
11、需要注意的是资源路径容易搞错。使用相对路径即可
12、贴出代码
前端精品教程：百度网盘下载
html
|
1
2
3
4
5
6
7
|
<
template
>
<
div
class
=
"hello"
>
<
div
id
=
"editor"
type
=
"text/plain"
style
=
"width:1024px;height:500px;"
></
div
>
<
button
@
click
=
"submits"
>保存</
button
>
<
button
@
click
=
"xieru"
>写入</
button
>
</
div
>
</
template
>
|
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script>
import
'../../static/utf8-jsp/ueditor.config'
import
'../../static/utf8-jsp/ueditor.all';
import
'../../static/utf8-jsp/lang/zh-cn/zh-cn';
export default {
name:
'hello',
data () {
return {
ue:
'',
uedata: [],
xierudata: []
}
},
mounted() {
this.ue = UE.getEditor(
'editor',{
BaseUrl:
'',
UEDITOR_HOME_URL:
'static/utf8-jsp/',
// toolbars:[]
});
},
methods: {
submits(){
this.uedata.push(UE.getEditor(
'editor').getContent());
console.log(this.uedata.join(
"\n"
));
},
xieru(){
UE.getEditor(
'editor').setContent('欢迎使用ueditor');
}
}
}
</script>
|