以下是一个完整的示例，展示了如何在 Quill 编辑器的光标位置插入 HTML 内容。我们将使用 clipboard.dangerouslyPasteHTML 方法来实现这一目标。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quill 插入 HTML 示例</title>
<link href="https://cdn.uv.cc/quill/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.uv.cc/quill/1.3.6/quill.js"></script>
</head>
<body>
<!-- Quill 编辑器容器 -->
<div id="editor"></div>
<button id="insertHtmlButton">插入HTML</button>
<script>
// 初始化 Quill 编辑器
var quill = new Quill('#editor', {
theme: 'snow',
placeholder: '在这里开始编辑...'
});
// 获取按钮元素
var insertHtmlButton = document.getElementById('insertHtmlButton');
// HTML 插入示例
insertHtmlButton.addEventListener('click', function() {
// 获取光标位置
var cursorPosition = quill.getSelection().index;
// 要插入的 HTML 内容
var htmlContent = `
<div style="color: red; font-size: 20px;">
<strong>这是一段插入的HTML内容</strong><br>
<em>包括一些格式</em>和一个<a href="https://example.com">链接</a>.
</div>
`;
// 使用 Quill 的 dangerouslyPasteHTML 插入 HTML 到光标位置
quill.clipboard.dangerouslyPasteHTML(cursorPosition, htmlContent);
});
</script>
</body>
</html>
代码说明：
- 引入 Quill 库：通过 CDN 引入 Quill 编辑器的 CSS 和 JavaScript 文件。
- 初始化 Quill 编辑器：在
#editor容器中初始化 Quill 编辑器，设置为snow主题。 - 插入 HTML 的按钮：在页面上添加一个按钮，当点击该按钮时，会在光标位置插入预定义的 HTML 内容。
- 插入 HTML：通过获取当前光标的位置 (
quill.getSelection().index)，然后使用quill.clipboard.dangerouslyPasteHTML方法在光标位置插入一个带有内联样式和格式的 HTML 内容。
插入效果：
点击“插入HTML”按钮后，编辑器中会在当前光标处插入一段 HTML 内容，包括：
- 红色的文本。
- 加粗的文字。
- 斜体的文字。
- 一个链接。
安全性注意事项：
dangerouslyPasteHTML方法允许你插入 HTML 内容，然而这个方法并不会自动处理内容的安全性，因此需要确保插入的 HTML 内容是可信任的，防止 XSS 攻击。- 为了保证 HTML 内容的安全，避免恶意脚本，插入前要对外部的 HTML 做必要的清理。
去创作