在线富文本html编辑

作者：ら非你不取丶发布日期:2026-03-26 浏览:31

<!-- 在线富文本HTML编辑器示例代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线富文本HTML编辑</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        #editor {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1>在线富文本HTML编辑器</h1>
        <div id="editor"></div>
        <button id="saveBtn" class="btn btn-primary mt-3">保存内容</button>
        <pre id="output" class="mt-3"></pre>
    </div>

    <!-- 引入Quill富文本编辑器的CSS和JS文件 -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        // 初始化Quill编辑器
        var quill = new Quill('#editor', {
            theme: 'snow'
        });

        // 保存按钮点击事件
        document.getElementById('saveBtn').addEventListener('click', function() {
            var delta = quill.getContents();
            var htmlContent = quill.root.innerHTML;
            document.getElementById('output').textContent = JSON.stringify(delta) + '\n\n' + htmlContent;
        });
    </script>
</body>
</html>

解释说明

HTML结构:
- #editor 是富文本编辑器的容器。
- #saveBtn 是一个按钮，用于保存编辑器中的内容。
- #output 用于显示保存的内容（Delta格式和HTML格式）。
引入外部资源:
- 使用了Bootstrap来美化页面。
- 使用了Quill.js库来实现富文本编辑功能。Quill是一个现代的富文本编辑器，支持多种格式和插件。
JavaScript逻辑:
- 初始化Quill编辑器，并将其绑定到#editor元素上。
- 当用户点击“保存内容”按钮时，获取编辑器中的内容并显示在#output中。内容以两种格式展示：Delta格式（Quill特有的操作记录格式）和HTML格式。

这个示例展示了如何创建一个简单的在线富文本编辑器，并且可以保存和显示编辑后的HTML内容。

上一篇：html a

下一篇：html下拉框