html富文本编辑器

作者：二分醒amor 发布日期:2025-07-12 浏览:100

<!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 {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>HTML富文本编辑器示例</h1>
    <div id="toolbar">
        <button onclick="formatDoc('bold')">粗体</button>
        <button onclick="formatDoc('italic')">斜体</button>
        <button onclick="formatDoc('underline')">下划线</button>
    </div>
    <div id="editor" contenteditable="true"></div>

    <script>
        function formatDoc(command) {
            document.execCommand(command, false, null);
        }
    </script>
</body>
</html>

解释说明：

HTML结构:
- #toolbar: 包含了几个按钮，用于触发不同的格式化命令（如粗体、斜体、下划线）。
- #editor: 这是一个可编辑的 div 元素，用户可以在其中输入和编辑富文本内容。
CSS样式:
- 给编辑器区域设置了宽度为100%，高度为300像素，并添加了一个边框，使其更易于识别。
JavaScript功能:
- formatDoc 函数使用了 document.execCommand 方法来应用格式化命令。这个方法允许我们在可编辑区域内执行各种文本格式化操作。
- 每个按钮点击时会调用 formatDoc 函数，并传递相应的命令（如 'bold'、'italic' 或 'underline'）。

上一篇：html转义字符

下一篇：html下划线