Quill基本使用和配置
Posted 风风风啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Quill基本使用和配置相关的知识，希望对你有一定的参考价值。
DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！
以下文章和本文相关，也许你也会喜欢：
《现代富文本编辑器Quill的模块化机制》
《Quill富文本编辑器的实践》
《如何将龙插入到编辑器中？》
《今天是儿童节，整个贪吃蛇到编辑器里玩儿吧》
《现代富文本编辑器Quill的内容渲染机制》
引言
之前在HWEB大前端技术分享会上给大家分享过 Quill 的一些实践，不过由于时间关系只讲了个大概，后续打算深入浅出地对 Quill 做一个详细的介绍。
这个系列打算从实践的角度去讲 Quill 富文本编辑器，先从 Quill 的基本使用开始吧！
极简方式使用 Quill
快速开始三部曲：
- 安装
- 引入
- 使用
// 安装
npm i quill
<div id="editor"></div>
// 引入
import Quill from \'quill\';
// 使用
const quill = new Quill(\'#editor\');
虽然我们已经初始化了 Quill 实例，但是在页面中却什么也看不到。
虽然看上去什么也没有，但是我们点击空白处，会发现有一个光标，并且可以输入内容，并给内容增加格式（由于没有工具栏，只能通过 Quill 快捷键Ctrl+B增加格式），以下是动画效果：
虽然只是一个极简版的富文本编辑器，不过加上边框和按钮，就是一个基础版的掘金评论框（还差插入表情和图片）
以上是关于Quill基本使用和配置的主要内容，如果未能解决你的问题，请参考以下文章
轻量级富文本编辑器quill editor结合iview的使用
改造vue-quill-editor： 结合element-ui上传图片到服务器