关于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 模块

小结

退出咱们

Just My Socks（注册教程内含优惠码）

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

引言

极简形式应用 Quill

加一些配置选项吧

配置编辑器容器元素 container

配置选项 options

更多配置选项

formats 格局白名单

placeholder 占位文本

readOnly 只读模式

modules 模块配置

配置 toolbar 模块

配置 keyboard 模块

配置 history 模块

小结

退出咱们

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）