首页 > 技术文章 > Quill基本使用和配置 - DevUI

kagol 2021-06-21 08:20 原文

DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸灵活至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB工具类产品,DevUI 将是一个很不错的选择!

Kagol.png

以下文章和本文相关,也许你也会喜欢:

《现代富文本编辑器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.png

虽然看上去什么也没有,但是我们点击空白处,会发现有一个光标,并且可以输入内容,并给内容增加格式(由于没有工具栏,只能通过 Quill 快捷键Ctrl+B增加格式),以下是动画效果:

快速开始.gif

虽然只是一个极简版的富文本编辑器,不过加上边框和按钮,就是一个基础版的掘金评论框(还差插入表情和图片)

推荐阅读