返回

Quill富文本编辑器使用示例

2023-11-28 Quill 富文本编辑器 Quill富文本编辑器 Quill使用示例 2491 0

Quill 是一款开源的 JavaScript 富文本编辑器,由 Google 开发。项目完全免费开源,目前在Github上以获得 37.5k stars。

Quill 官网地址:https://quilljs.com/

Quill Github地址:https://github.com/quilljs/quill

Quill富文本编辑器使用示例

Quill 具有以下特点:

轻量级:Quill 的代码量很小,仅有 20 多 KB。

灵活性强:Quill 提供了丰富的 API,可以满足各种需求。

可扩展性强:Quill 支持插件机制,可以扩展其功能。

Quill 的用法非常简单,只需以下几步即可创建一个 Quill 编辑器:

引入 Quill 的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>

创建一个 Quill 实例:

const editor = new Quill('#editor');

设置 Quill 的配置:

editor.setOptions({
  placeholder: '编辑内容...',
  theme: 'snow',
});

添加文本:

editor.insertText('Hello, world!');

设置文本格式:

editor.formatText('Hello, world!', {
  bold: true,
  italic: true,
});

以下是一个简单的 Quill 编辑器示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quill 富文本编辑器</title>
</head>
<body>
  <div id="editor"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
  <script>
    const editor = new Quill('#editor');
    editor.setOptions({
      placeholder: '编辑内容...',
      theme: 'snow',
    });
    editor.insertText('Hello, world!');
  </script>
</body>
</html>

这段代码会创建一个 Quill 编辑器,并在编辑器中插入文本“Hello, world!”。编辑器的默认主题为“snow”。

Quill 还提供了丰富的 API,可以用于设置编辑器的各种属性,例如:

设置Quill编辑器的高度和宽度:

editor.setHeight(200);
editor.setWidth(500);

设置Quill编辑器的工具栏:

editor.addToolbar(['bold', 'italic', 'underline', 'strikethrough']);

设置Quill编辑器的样式:

editor.theme.disable();
editor.theme.enable();

获取Quill编辑器的内容:

const content = editor.getContent();

设置Quill编辑器的内容:

editor.setContent('新的文本内容');

有关 Quill 的更多信息,请参考 Quill 官方文档:https://quilljs.com/docs/

您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

领取 通义灵码 免费使用资格 兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流编程工具, 为你提供高效、流畅、舒心的智能编码体验!

DOVE 网络加速器 梯子 免费 试用

顶部