🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] 内容创建从一开始就一直是网页的核心。几乎所有的Web应用使用`<textarea>`作为一种原生的基本解决方案。但是,在某些时候,您可能需要在文本输入中添加格式,这就需要富文本编辑器。这里有许多选择,但Quill带来了一些可参考的现代思想。 ## API驱动的设计 富文本编辑器帮助人们编写文本,但奇怪的是,大多数富文本编辑器都不知道用户编写了什么文本内容。这些编辑器通过与Web开发人员相同的视角查看内容,这就是DOM。因为DOM由不平衡数中的节点组成,而文本是由行、词及字符组成,这呈现了它们之间的不一致。 DOM没有以字符为单位的API,因为这个限制,大多数富文本编辑器无法回答诸如“此范围内的文本是什么?”或者“光标在粗体文本上吗?”的问题。在这些原型的基础上,很难建立丰富的编辑体验。 Quill是为编辑和记住字符而设计的,它的api构建在这些以自然文本为中心的单元之上。为了查找粗体字符,Quill不需要遍历DOM来查找`<b>` 或 `<strong>`节点,而只需要调用[`getFormat(5, 1)`](../api/格式化formatting.md)查找font-weight的样式属性。所有核心[API](../api.md) 调用都允许访问或修改任意索引和长度。 [event API](../api/事件events.md)还能以直观的JSON格式报告更改,不需要解析HTML或diff DOM树。 ## 自定义内容和格式 在过去,评估富文本编辑器进行就像比较所需格式的清单一样简单。一个好的富文本编辑器的标志就是它支持多少格式。这仍然是评价富文本编辑器一个重要的措施,但这几乎可以忽略。 文本不再打印,而是直接呈现在网页上——比纸更丰富的画布。内容可以是实时的、交互式的,甚至是协作的。一些富文本编辑器甚至可以支持简单的媒体,如图像和视频。几乎没有编辑器能嵌入tweet或交互式图表。然而,这正是网络发展的方向:更丰富、更互动。支持内容创建的工具需要考虑这些场景。 Quill公开了自己的文档模型,这是对DOM的强大抽象,允许扩展和定制。Quill可以支持无上限的格式和内容。用户已经使用它添加嵌入式幻灯片,交互式检查表和三维模型。 ## 跨平台 跨平台支持对许多Javascript库都很重要,但这意味着不同平台标准往往不同。对Quill来说,这条不仅仅指他能运行和工作,而且必须用同样的方式运行和工作。功能不仅仅是跨平台的考虑,用户和开发人员的体验也是如此。如果某些内容在OSX上的Chrome中产生了特定的标记,那么它在IE上也会产生相同的标记。如果在Windows上的Firefox中按enter保留粗体格式状态,则这个功能也将保留在mobile Safari中。 ## 易用 这些好处可以通过简单的使用一个打包库获得。 Quill自带默认的参数,你只需要用几行JavaScript代码来启用: ```js var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' }); ``` 如果您的应用不需要定制,你就不用定制Quill,就好好享受开箱即用的丰富一致的体验。 Enjoy!