关于devui:Quill基本使用和配置-DevUI

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡 沉迷 、 灵便 、 至简 的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的 工具类产品，DevUI 将是一个很不错的抉择！

以下文章和本文相干，兴许你也会喜爱：

《古代富文本编辑器 Quill 的模块化机制》

《Quill 富文本编辑器的实际》

《如何将龙插入到编辑器中？》

《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》

《古代富文本编辑器 Quill 的内容渲染机制》

之前在 HWEB 大前端技术分享会上给大家分享过 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 类一共有两个参数，第一个参数是必选的编辑器容器元素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">
  <p>DevUI：面向企业中后盾的前端开源解决方案 </p>
  <h2> 主旨与法令 </h2>
  <p> 标准的组件化的目标不是为了限度发明，而是为了创造者更确定、迷信、高效。所有行为决策的价值归依是产品业务。产品业务永远比组件化自身更重要，业务第一。</p>
  <p> 标准不是相对、教条、冷酷、强制的，理论工作中总会有新增需要、存优化空间、情感化设计需要超出个别通用标准。放弃克服的同时，容许基于强烈业务需要的标准冲破；之后如果有足够的理由迭代出组件，那么就进行组件深入。</p>
  <h2> 设计语言 </h2>
  <p>DevUI 的价值观奠定了 DevCloud 品牌的根底。它是 DevCloud 的设计师们思考、工作的产物，反映了 DevCloud 的产品文化、设计理念和对客户的承诺。DevUI 的这些价值观贯通于所有产品和面向客户的沟通和内容中。同时，它是 DevUI 设计准则的源头，为具体的设计办法提供启发和指引。</p>
  <p>DevUI 提倡 <code> 沉迷 </code>、<code> 灵便 </code>、<code> 致简 </code> 的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。</p>
  <h2> 致简 </h2>
  <p>DevUI 保持以用户为核心去进行设计，重视直观可达性，把服务示例化以帮忙用户疾速融入到应用中去。同时，DevUI 提供大量的快捷键，简化应用的流程、进步操作效率。</p>
  <h2> 沉迷 </h2>
  <p>DevUI 的沉迷式体验包含人的感官体验和认知体验，当用户的集体技能与面对的挑战相互匹配，并且长时间处在稳固状态时，用户达到心流状态并且不易被外界因素所烦扰。</p>
  <p> 在产品设计中，DevUI 专一在升高用户在实现工作指标时的认知阻力中。为此，DevUI 同时提供多种不同的切换页面的路径，包含面包屑、快捷键、按钮和链接等，不便用户随时疾速、间断地切换页面，达到本人所需的页面，使用户处于晦涩的体验中，加重寻找信息的焦虑感。</p>
  <h2> 灵便 </h2>
  <p>DevUI 提供超过 60 个独立原子级组件，能够自由组合，像搭积木一样，用小组件搭建出合乎本身产品须要的分子级组件，进而搭建出本人的业务零碎。</p>
</div>

渲染进去的编辑器成果：

第二个参数是可选的配置选项options，options 是一个 JSON 对象，比方咱们想给咱们的编辑器减少一个主题，使它不再那么枯燥。

const quill = new Quill('#editor', {theme: 'snow'});

另外须要引入该主题对应的款式：

@import 'quill/dist/quill.snow.css';

这时咱们看到编辑器曾经有一个工具栏。

并且能够通过工具栏对编辑器的内容进行操作，比方给 DevUI 减少一个超链接：

除了 snow 主题，Quill 还内置了一个 bubble 气泡主题，配置形式和 snow 主题一样：

引入主题款式
在 options 里配置主题

// 引入 bubble 主题款式
@import 'quill/dist/quill.bubble.css';

const quill = new Quill('#editor', {theme: 'bubble' // 配置 bubble 主题});

成果如下：

bubble 主题没有显性的工具栏，它会在你选中编辑器中的文本时，在选中文本的下方显示一个气泡工具栏，从而对文本进行格式化操作，比方给选中的段落减少援用格局：

Quill 不仅仅能够配置主题，options 一共反对 8 个配置选项：

bounds 编辑器内浮框的边界
debug debug 级别
formats 格局白名单
modules 模块
placeholder 占位文本
readOnly 只读模式
scrollingContainer 滚动容器
theme 主题

这个配置项十分有用，比方刚刚提到的掘金评论框，咱们发现评论框里只能插入纯文本，其余格局都不容许，即便时粘贴进来的格式化文本也会变成纯文本。

在 Quill 里很容易实现，只须要配置 formats 为空数组即可。

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: []});

留神这里的 formats 格局白名单，管制的是内容理论的格局，和设置格局的渠道无关，比方 formats 设置为空，那么无论是：

通过工具栏设置格局
还是通过快捷键（比方Ctrl+B）设置格局
抑或是粘贴带格局的文本
都是无奈设置格局的。

如果咱们想保留一部分格局，比方只保留 粗体 和列表 两种格局：

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: ['bold', 'list']
});

Quill 一共反对 11 种行内格局：

background
bold
color
font
code
italic
link
size
strike
script
underline

7种块级格局：

blockquote
header
indent
list
align
direction
code-block

3种嵌入格局：

formula
image
video

不配置 formats 选项，会默认反对所有的 21 种格局。

咱们发现掘金的评论框在没有输出内容时，会有一个 输出评论...的占位文本。

这能够很容易地通过配置 placeholder 选项实现。

const quill = new Quill('#editor', {formats: [],
  placeholder: '输出评论...',
});

通过配置 readOnly 能够实现：

初始状态编辑器是浏览态，不能够编辑，能够通过点击 编辑 按钮让编辑器变成编辑态。

因为掘金的评论框不反对编辑，就不拿它举例子。

以 DevCloud 看板我的项目的评论框为例，初始状态下评论是不可编辑的，点击 编辑 按钮，变成可编辑状态，并且显示工具栏、保留按钮等元素，点击保留按钮，新增的内容被保留，编辑器变成只读态。

这个配置项放在最初并不代表它不重要，恰恰相反，这是 Quill 中 最重量级 也是 最罕用 的配置。

在之前的文章中，给大家介绍过 Quill 的模块化机制，这个配置项就是用来配置 Quill 的模块的。

在 Quill 的模块化机制一文中，咱们提到

Quill 一共有 6 个内置模块：

Clipboard 粘贴版
History 操作历史
Keyboard 键盘事件
Syntax 语法高亮
Toolbar 工具栏
Uploader 文件上传

每个模块的用处详见 Quill 内置模块章节。

modules选项能够用来配置这些模块。

Quill 默认只在工具栏中显示一部分格式化按钮，外面没有插入图片的按钮，咱们能够通过配置 toolbar 模块来减少。

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默认的
      [{header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{list: 'ordered'}, {list: 'bullet'}],
      ['clean'],
      
       // 新增的
      ['image']
    ]
  }
});

如果想做一个掘金这样的富文本编辑器，也非常简单。

掘金的富文本编辑器次要蕴含以下工具栏按钮：

加粗
斜体
下划线
一级 / 二级题目
援用
代码块
行内代码
无序列表
有序列表
超链接
插入图片

应用 Quill 实现，须要这样配置 toolbar 模块。

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      'bold', 'italic', 'underline', 
      {header: 1}, {header: 2},
      'blockquote', 'code-block', 'code', 'link',
      {list: 'ordered'}, {list: 'bullet'},
      'image',
    ]
  }
});

略微批改下款式，就能做出一个和掘金富文本编辑器差不多的富文本编辑器啦，成果如下：

以下是和掘金理论的富文本编辑器的比照图：

比照以上成果比照图，除了工具栏的 icon 应用的是掘金 Markdown 编辑器的 icon 之外，其余简直是一样的。

除了工具栏模块，咱们还能够配置别的模块，比方快捷键模块 keyboard，keyboard 模块默认反对很多快捷键，比方：

加粗的快捷键是Ctrl+B；
超链接的快捷键是Ctrl+K;
撤销 / 回退的快捷键是Ctrl+Z/Y。

但它不反对删除线的快捷键，如果咱们想定制删除线的快捷键，假如是Ctrl+Shift+S，能够这样配置：

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默认的
      [{header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{list: 'ordered'}, {list: 'bullet'}],
      ['clean'],
      ['image']
    ],
    
    // 新增的
    keyboard: {
      bindings: {
        strike: {
          key: 'S',
          ctrlKey: true,
          shiftKey: true,
          handler: function(range, context) {
            // 获取以后光标所在文本的格局
            const format = this.quill.getFormat(range);
            // 减少 / 勾销删除线
            this.quill.format('strike', !format.strike);
          }
        },
      }
    },
  }
});

Quill 内置的 history 模块，每隔 1s 会记录一次操作历史，并放入历史操作栈（最大 100）中，便于撤销 / 回退操作。

如果咱们不想记录得那么频繁，想 2s 记录一次，另外咱们想减少操作栈的大小，最大记录 200 次操作历史，能够这样配置：

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默认的
      [{header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{list: 'ordered'}, {list: 'bullet'}],
      ['clean'],
      ['image']
    ],
    keyboard: {
      bindings: {
        strike: {
          key: 'S',
          ctrlKey: true,
          shiftKey: true,
          handler: function(range, context) {
            // 获取以后光标所在文本的格局
            const format = this.quill.getFormat(range);
            // 减少 / 勾销删除线
            this.quill.format('strike', !format.strike);
          }
        },
      }
    },
    
    // 新增的
    history: {
      delay: 2000, // 2s 记录一次操作历史
      maxStack: 200, // 最大记录 200 次操作历史
    }
  }
});

本文次要介绍了 Quill 的根本用法，以及如何通过 options 选项配置 Quill。

后续将介绍更多对于 Quill 的实际，关注 DevUI 不迷路🦌。

欢送加 DevUI 小助手微信：devui-official，一起探讨 Angular 技术和前端技术。

欢送关注咱们 DevUI 组件库，点亮咱们的小星星🌟：

https://github.com/devcloudfe/ng-devui

也欢送应用 DevUI 新公布的 DevUI Admin 零碎，开箱即用，10 分钟搭建一个好看大气的后盾管理系统！

咱们是 DevUI 团队，欢送来这里和咱们一起打造优雅高效的人机设计 / 研发体系。招聘邮箱：muyang2@huawei.com。

文 /DevUI Kagol

往期文章举荐

《Angular Schematics 在 DevUI Admin 中的实际》

《古代富文本编辑器 Quill 的模块化机制》

《Quill 富文本编辑器的实际》

《如何将龙插入到编辑器中？》

《明天是儿童节，整个贪吃蛇到编辑器里玩儿吧》

关于devui:Quill基本使用和配置-DevUI

引言

极简形式应用 Quill

加一些配置选项吧

配置编辑器容器元素 container

配置选项 options

更多配置选项

formats 格局白名单

placeholder 占位文本

readOnly 只读模式

modules 模块配置

配置 toolbar 模块

配置 keyboard 模块

配置 history 模块

小结

退出咱们