vue组件——富文本编辑器
什么是富文本编辑器
vue组件——富文本编辑器-左眼会陪右眼哭の博客
富文本编辑器支持markdown语法，是程序员做笔记，功能很多，样式很多的一种很方便的文本编辑器，很推荐学会使用markdown语法 今天在vue的学习中，用到了富文本编辑器的插件， 插件源码地址
怎么在vue组件页面中插入富文本编辑器
- 使用vue ui，在ui界面直接搜索依赖 vue-quill-editor
vue组件——富文本编辑器-左眼会陪右眼哭の博客
或者在项目根路径的命令框下 npm install vue-quill-editor --save
- 挂载 vue-quill-editor 插件 全局挂载
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)局部挂载
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}- 插件的简单使用
<!-- 富文本编辑器组件 -->
<quill-editor v-model="addForm.goods_introduce" ref="myQuillEditor"></quill-editor>- 插件的效果
总结
以直觉得markdown编辑器很好用，突然碰到使用的源码，挺简单的，也感觉很有趣，虽然是最简单的使用。更多的用法，可以参考文档，我想肯定还有更多的编辑器也有这样的插件，拓展的以后慢慢探索，，，
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录