vue集成百度UEditor富⽂本编辑器使⽤教程
在前端开发的项⽬中，难免会遇到需要在页⾯上集成⼀个富⽂本编辑器。那么，如果你有这个需求，希望可以帮助到你。vue是前端开发者所追捧的框架，简单易上⼿，但是基于vue的富⽂本编辑器⼤多数太过于精简。于是我将百度富⽂本编辑器放到vue项⽬中使⽤。效果图如下
废话不多说。
1、使⽤vue-cli构建⼀个vue项⽬。然后下载UEditor源码，
把项⽬复制到vue项⽬的static⽂件下。⽬的是让服务可以访问到⾥⾯的⽂件，打开UEditor⽬录⽂件。这⾥下载的是jsp版本的。⽂件名字没有更改过。打开⾥⾯的fig.js⽂件到serverUrl把这⾏代码注释了。这个代码是⽤来上传图⽚的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。
2、在.vue⽂件中引⼊主要js⽂件
import ‘../../static/fig'
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" ></div>
6、然后配置资源路径。在实例化的时候传⼊的参数⾥。第⼆个参数是⼀个对象。内容包括路径。
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
<template>
<div class="hello">
<div id="editor" type="text/plain" ></div>
<button @click="submits">保存</button>
<button @click="xieru">写⼊</button>
</div>
</template>
js
<script>
import '../../static/fig'
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/',
jsp帮助文档// toolbars:[]
});
},
methods: {
submits(){
this.uedata.Editor('editor').getContent());
console.log(this.uedata.join("\n"));
},
xieru(){
}
}
}
</script>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论