Quill -岩石教程

特点

现代化界面: 提供简洁、直观的用户界面，提升用户体验。
模块化设计: 允许开发者根据需求加载不同模块，实现高定制化。
跨浏览器支持: 兼容主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。
丰富的 API: 提供强大的 API 接口，支持深度定制和扩展。
轻量级: 核心文件体积小，加载速度快，性能优异。
文档良好: 拥有详细的文档和示例，便于开发者快速上手。

使用场景

任何需要富文本输入的 web 应用

安装方式

使用 npm 或 yarn 安装

npm install quill
# 或者
yarn add quill

使用示例

HTML 文件中引入 Quill 并初始化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Quill Example</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
  <h1>My Quill Example</h1>
  <div id="editor"></div>
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
  </script>
</body>
</html>

常用 API 介绍

1. new Quill(container, options)

描述: 初始化 Quill 编辑器并设置配置项。

参数:

container: DOM 元素，选择器或元素节点。
options: 一个对象，包含配置选项。

示例:

var quill = new Quill('#editor', {
  theme: 'snow',  // 主题
  modules: {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  }
});

2. quill.setContents(delta)

描述: 设置编辑器的内容为指定的 Delta 格式数据。

参数:

delta: 一个 Delta 对象，包含要设置的内容。

示例:

var delta = {
  ops: [
    { insert: 'Hello, ' },
    { insert: 'Quill', attributes: { bold: true } },
    { insert: '!' }
  ]
};
quill.setContents(delta);

3. quill.getContents()

描述: 获取编辑器的内容，以 Delta 格式返回。

参数: 无

示例:

var delta = quill.getContents();
console.log(delta);  // 输出当前编辑器内容的 Delta

4. quill.setText(text)

描述: 设置编辑器的内容为指定的纯文本。

参数:

text: 字符串，包含要设置的文本内容。

示例:

quill.setText('Hello, Quill!');

5. quill.getText()

描述: 获取编辑器的内容，以纯文本格式返回。

参数: 无

示例:

var text = quill.getText();
console.log(text);  // 输出当前编辑器内容的纯文本

6. quill.on(eventName, handler)

描述: 为编辑器注册事件监听器。

参数:

eventName: 字符串，事件名称，如 text-change, selection-change 等。
handler: 函数，当事件触发时调用。

示例:

quill.on('text-change', function(delta, oldDelta, source) {
  console.log('Text change event triggered:', delta);
});

7. quill.format(name, value)

描述: 格式化当前选区的内容。

参数:

name: 字符串，格式名称，如 bold, italic, underline 等。
value: 格式的值，如 true, false 或其他有效值。

示例:

quill.format('bold', true);

8. quill.insertText(index, text, formats)

描述: 在指定位置插入文本，并应用格式。

参数:

index: 数字，插入位置的索引。
text: 字符串，要插入的文本内容。
formats (可选): 对象，包含要应用的格式。

示例:

quill.insertText(0, 'Hello, Quill!', { bold: true });

9. quill.deleteText(index, length)

描述: 删除指定范围内的文本。

参数:

index: 数字，起始位置的索引。
length: 数字，要删除的文本长度。

示例:

quill.deleteText(0, 5);

10. quill.clipboard.dangerouslyPasteHTML(index, html)

描述: 在指定位置插入 HTML 内容，可能会带来安全风险。

参数:

index: 数字，插入位置的索引。
html: 字符串，包含要插入的 HTML 内容。

示例:

quill.clipboard.dangerouslyPasteHTML(0, '<h1>Hello, Quill!</h1>');

高级用法

自定义模块: Quill 允许开发者创建和集成自定义模块，以扩展编辑器的功能。

示例:

class MyCustomModule {
  constructor(quill, options) {
    this.quill = quill;
    this.options = options;

    // 在 toolbar 添加自定义按钮
    var toolbar = quill.getModule('toolbar');
    toolbar.addHandler('myCustomButton', this.customButtonHandler.bind(this));

    var button = document.querySelector('.ql-myCustomButton');
    button.innerHTML = 'My Button';
  }

  customButtonHandler() {
    const range = this.quill.getSelection();
    if (range) {
      this.quill.insertText(range.index, 'Hello from My Custom Module!', 'bold', true);
    }
  }
}

// 注册自定义模块
Quill.register('modules/myCustomModule', MyCustomModule);

// 使用自定义模块
var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        [{ 'header': [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['myCustomButton']
      ],
      handlers: {
        'myCustomButton': function() {}
      }
    },
    myCustomModule: {}
  }
});

Quill

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料