Quill基本使用和配置指南-DevUI.docx

? ? Quill基本使用和配置-DevUI ? ? 【摘要】 DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！以下文章和本文相关，也许你也会喜欢：《现代富文本编辑器Quill的模块化机制》《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 最简单的方式。 加一些配置选项吧 配置编辑器容器元素 container Quill 类一共有两个参数，第一个参数是必选的编辑器容器元素container，可以是一个CSS选择器，比如前面的#editor，也可以是一个DOM元素，比如： const container = document.getElementById(editor);// const container = document.querySelector(#editor);// const container = $(#editor).get(0);const quill = new Quill(container); 如果容器里面已经有一些 HTML 元素，那么初始化 Quill 的时候，那些元素也会渲染出来，比如： div id=editor pDevUI：面向企业中后台的前端开源解决方案/p h2宗旨与法则/h2 p规范的组件化的目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依是产品业务。产品业务永远比组件化本身更重要，业务第一。/p p规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件深化。/p h2设计语言/h2 pDevUI的价值观奠定了 DevCloud品牌的基础。它是 DevCloud 的设计师们思考、工作的产物，反映了 DevCloud 的产品文化、设计理念和对客户的承诺。DevUI的这些价值观贯穿于所有产品和面向客户的沟通和内容中。同时，它是 DevUI 设计原则的源头，为具体的设计方法提供启发和指引。/p pDevUI倡导code沉浸/code、code灵活/code、code致简/code的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。/p h2致简/h2 pDevUI坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。同时， DevUI提供大量的快捷键，简化使用的流程、提高操作效率。/p h2沉浸/h2 pDevUI的沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。/p p在产品设计中，DevUI专注在降低用户在完成任务