现代富文本编辑器Quill的内容渲染机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云 DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。 官方网站: devui.design Ng组件库: ng-devui(欢迎Star) 引言 在 Web 开发领域,富文本编辑器( Rich Text Editor )是一个使用场景非常广,又非常复杂的组件。 要从0开始做一款好用、功能强大的富文本编辑器并不容易,基于现有的开源库进行开发能节省不少成本。 Quill 是一个很不错的选择。 本文主要介绍Quill内容渲染相关的基本原理,主要包括: Quill描述编辑器内容的方式 Quill将Delta渲染到DOM的基本原理 Scroll类管理所有子Blot的基本原理 Quill如何描述编辑器内容? Quill简介 Quill 是一款API驱动、易于扩展和跨平台的现代 Web 富文本编辑器。目前在 Github 的 star 数已经超过25k。 Quill 使用起来也非常方便,简单几行代码就可以创建一个基本的编辑器: <script> var quill = new Quill('#editor'...