富文本编辑器如下所示,比如在微信公众号写文章时会看到。
富文本编辑器就是一个超级textarea,包含大量功能,类似word工具。
文章介绍的是一个富文本编辑器UI组件库vue-quill-editor。
地址(点击跳转)
vue-quill-editor依赖于quill插件。
使用如下:
- 安装
npm install vue-quill-editor
- 引入quill模块的样式
// require styles
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’
- 注册
Vue.use(VueQuillEditor)
该插件在全部注册了quill-editor组件,我们可直接使用。
注:可以通过v-model绑定数据,渲染数据时,要使用v-html指令
- 使用
效果如下: