在开发的时候,我们可能会使用到富文本编辑器,因为它看着比较美观,相比于其他的输入框,富文本编辑器的功能更多,给用户的体验更好。下面我们进行vue中整合富文本编辑器。
首先是下载wangeditor
npm i wangeditor --save
其次在使用界面进行引入并进行初始化配置。
引入wangeditor
import E from 'wangeditor'
初始化
<script>
import E from 'wangeditor'
export default {
data() {
return {
form: {},
editor: null,
viewData: null,
editFormVisible: false,
}
},
methods: {
//添加
add(){
this.form = {};
//进行新增数据时,我们给wangeditor容器赋值为空
this.initWangEditor('');
this.dialogFormVisible = true;
},
save(){
this.form.description = this.editor.txt.html()
//进行添加或修改的操作
},
edit(row){
this.form = row
//进行修改的操作时,我们将参数赋值为对应的参数
this.initWangEditor(this.form.description || '');
this.dialogFormVisible = true;
},
//查看详情
viewEditor(description){
this.viewData = description;
this.editFormVisible = true;
},
//富文本编辑器初始化
initWangEditor(content){
setTimeout(()=>{
if (!this.editor){
//创建wangeditor对象
this.editor = new E(document.getElementById('div1'));
this.editor.config.placeholder = '请输入内容';
//设置文件上传的后端路径
this.editor.config.uploadImgServer = '/api/files/wang/upload';
//设置文件上传的参数名
this.editor.config.uploadFileName = 'file'
//设置文件上传的请求头
this.editor.config.uploadImgHeaders={
token: this.user.token
}
//自定义设置文件上传成功的回调
/*this.editor.config.uploadImgHooks = {
// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式,可使用 customInsert
customInsert: function(insertImgFn, result) {
// result 即服务端返回的接口
console.log('customInsert', result)
// insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可
insertImgFn(result.data[0].url)
}
}*/
//创建wangeditor对象
this.editor.create();
}
//给wangeditor中设置内容
this.editor.txt.html(content)
},100)
}
}
}
</script>
上面是前端的请求配置,其中主要的是设置请求的路径,请求的参数名以及请求的请求头中的内容,还有上传文件成功后的回调。一般只要按照如下的方式返回响应的结果的话,我们就不用设置成功后的回调。
{
接口返回的数据局类型是:
// errno 即错误代码,0 表示没有错误。
// 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组,返回图片Object,Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的,可以不设置或设置为空字符串,需要注意的是url是一定要填的。
"data": [
{
url: "图片地址",
alt: "图片文字说明",
href: "跳转链接"
},
{
url: "图片地址1",
alt: "图片文字说明1",
href: "跳转链接1"
},
"……"
]
}
其他详细的配置我们可以参考相应的官方文档:Introduction · wangEditor 用户文档https://www.wangeditor.com/v4/
后端对应的设置
@PostMapping("/wang/upload") public Dict wangUpload(MultipartFile file) throws Exception { Dict dict = Dict.create(); Map<String,Object> map = new HashMap<>(); //把文件存储到本地磁盘上 String originalFilename = file.getOriginalFilename(); String filename = UUID.randomUUID() +originalFilename.substring(originalFilename.lastIndexOf(".")); String url = AliOssUtil.uploadFile(filename, file.getInputStream()); dict.set("errno",0).set("data", CollUtil.newArrayList(Dict.create().set("url",url))); // map.put("errno",0); // map.put("data",url); log.info("上传路径:{}",url); return dict; }
通过以上的方式即可完成wangeditor的使用,并进行上传等操作。
注意
1.当我们在初始化wangeditor时,可能会遇到如下的错误:
这个是因为我们已经创建过一次容器了,不能再次创建了。所以我们在初始化容器的时候加了if判断,从而进行保证if只初始化一次。
如下:
2.遇到如下错误:'无效的节点选择器:#div1'
这种情况是我们在初始化wangeditor的时候,需要将方法放到methods中,否则的话不生效(在vue中是这样的)。
结束
我们在整合富文本编辑器的时候可能会遇到各种各样的问题,一般来说,只要写到方法体中,出错的概率不会很大。好了,今天就到这里了,如果对您有用的话,请务必要点个关注,谢谢!!!