html 富文本编辑器

作者：—只賣身不賣藝发布日期:2025-11-09 浏览:101

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 富文本编辑器示例</title>
    <style>
        #editor {
            border: 1px solid #ccc;
            width: 100%;
            height: 200px;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h1>富文本编辑器示例</h1>
    <div id="toolbar">
        <button onclick="document.execCommand('bold', false, null)">Bold</button>
        <button onclick="document.execCommand('italic', false, null)">Italic</button>
        <button onclick="document.execCommand('underline', false, null)">Underline</button>
        <button onclick="document.execCommand('insertUnorderedList', false, null)">Bullet List</button>
        <button onclick="document.execCommand('insertOrderedList', false, null)">Numbered List</button>
    </div>
    <div id="editor" contenteditable="true"></div>

    <script>
        // 确保光标在编辑器中时，点击工具栏按钮可以生效
        document.getElementById('editor').focus();
    </script>
</body>
</html>

解释说明

HTML 结构:
- <div id="toolbar">: 包含一些基本的富文本编辑按钮（如加粗、斜体、下划线等）。
- <div id="editor" contenteditable="true">: 这是一个可编辑的区域，用户可以在其中输入和格式化文本。
CSS 样式:
- 给 #editor 添加了边框、宽度、高度和内边距，使其看起来更像一个编辑器。
JavaScript 功能:
- 使用 document.execCommand() 方法来实现富文本编辑功能。例如，点击 "Bold" 按钮会将选中的文本加粗。
- contenteditable="true" 属性使 <div> 元素变成可编辑区域。
工具栏按钮:
- 每个按钮通过 onclick 事件调用 document.execCommand() 来应用相应的格式。

这个简单的富文本编辑器可以进一步扩展，添加更多功能（如插入图片、链接等）。

上一篇：用html设计一个网页

下一篇：html表格模板