html 富文本

作者：ˉ吻干迩的'泪发布日期:2025-11-11 浏览:34

<!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>
    <style>
        /* 简单的样式设置 */
        .editor {
            border: 1px solid #ccc;
            padding: 10px;
            width: 100%;
            height: 200px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h1>HTML 富文本编辑器示例</h1>
    <div id="editor" class="editor" contenteditable="true">
        <p>这是一个富文本编辑器的示例。你可以在这里编辑文本，添加<strong>粗体</strong>、<em>斜体</em>、<u>下划线</u>等格式。</p>
        <p>你还可以插入图片：<img src="https://via.placeholder.com/150" alt="示例图片"></p>
        <p>或者创建一个链接：<a href="https://example.com">点击这里</a></p>
        <ul>
            <li>无序列表项 1</li>
            <li>无序列表项 2</li>
        </ul>
        <ol>
            <li>有序列表项 1</li>
            <li>有序列表项 2</li>
        </ol>
    </div>

    <script>
        // 简单的脚本用于增强富文本编辑器的功能
        document.addEventListener('DOMContentLoaded', function () {
            const editor = document.getElementById('editor');

            // 添加一个按钮来保存内容
            const saveButton = document.createElement('button');
            saveButton.textContent = '保存内容';
            saveButton.style.marginTop = '10px';
            saveButton.style.display = 'block';

            // 将按钮添加到页面中
            editor.parentNode.insertBefore(saveButton, editor.nextSibling);

            // 监听保存按钮点击事件
            saveButton.addEventListener('click', function () {
                alert('保存的内容：\n' + editor.innerHTML);
            });
        });
    </script>
</body>
</html>

解释说明：

HTML 结构：
- 使用了一个 div 元素作为富文本编辑区域，并设置了 contenteditable="true" 属性，使其可以编辑。
- 在编辑区域内预设了一些富文本内容，包括段落、图片、链接、无序列表和有序列表。
CSS 样式：
- 为编辑区域添加了简单的边框和内边距，使其看起来更像一个编辑器。
JavaScript 功能：
- 添加了一个“保存内容”的按钮，当点击按钮时会弹出一个对话框，显示当前编辑区域的内容（即 innerHTML）。

这个示例展示了如何使用 HTML、CSS 和 JavaScript 创建一个简单的富文本编辑器。

上一篇：html p标签

下一篇：html的mimetype