Quill富文本编辑器使用示例
2023-11-28
2491 0Quill 是一款开源的 JavaScript 富文本编辑器,由 Google 开发。项目完全免费开源,目前在Github上以获得 37.5k stars。
Quill 官网地址:https://quilljs.com/
Quill Github地址:https://github.com/quilljs/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 等主流编程工具, 为你提供高效、流畅、舒心的智能编码体验!