轻量级 web 富文本编辑器 wangEditor 的使用

介绍

wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。

官网:www.wangEditor.com
文档:doc.wangEditor.com
源码:github.com/wangeditor-team/wangEditor

轻量级 web 富文本编辑器 wangEditor 的使用_第1张图片

踩坑

1、调用Editor提供的方法时,浏览器报错The given range isn’t in document.

轻量级 web 富文本编辑器 wangEditor 的使用_第2张图片

轻量级 web 富文本编辑器 wangEditor 的使用_第3张图片
轻量级 web 富文本编辑器 wangEditor 的使用_第4张图片

原因:这是因为在使用编辑器是时候,装他的body没有加载完成。即editor这个节点尚未渲染,就会报range错误。
解决方法:将创建编辑器的代码放到mounted钩子函数中执行。mounted钩子函数的执行时机是在页面内容全部渲染完成后执行。

轻量级 web 富文本编辑器 wangEditor 的使用_第5张图片

轻量级 web 富文本编辑器 wangEditor 的使用_第6张图片

你可能感兴趣的:(前端,Vue,富文本编辑器,前端,编辑器)