html5编辑器

作者：◆丶依然如风发布日期:2026-05-08 浏览:48

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5编辑器示例</title>
    <style>
        #editor {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow: auto;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>HTML5 编辑器示例</h1>
    <div id="editor" contenteditable="true">
        <p>点击这里开始编辑内容...</p>
    </div>

    <script>
        // 获取编辑器元素
        const editor = document.getElementById('editor');

        // 示例：保存编辑器内容到本地存储（可选）
        function saveContent() {
            const content = editor.innerHTML;
            localStorage.setItem('editorContent', content);
            alert('内容已保存');
        }

        // 示例：从本地存储加载内容（可选）
        function loadContent() {
            const savedContent = localStorage.getItem('editorContent');
            if (savedContent) {
                editor.innerHTML = savedContent;
            }
        }

        // 页面加载时尝试加载之前保存的内容
        window.onload = loadContent;

        // 添加一个按钮用于保存内容
        const saveButton = document.createElement('button');
        saveButton.innerText = '保存内容';
        saveButton.onclick = saveContent;
        document.body.appendChild(saveButton);
    </script>
</body>
</html>

解释说明：

HTML 结构:
- 使用了一个 div 元素作为编辑区域，并设置了 contenteditable="true" 属性，使其可以被用户编辑。
- 添加了一个按钮用于保存编辑器中的内容。
CSS 样式:
- 设置了编辑器的宽度、高度、边框和字体样式，确保其在页面上显示为一个可编辑的区域。
JavaScript 功能:
- 提供了两个函数：saveContent 和 loadContent，用于将编辑器中的内容保存到浏览器的本地存储中，并在页面加载时尝试恢复之前保存的内容。
- 当用户点击“保存内容”按钮时，会调用 saveContent 函数，将当前编辑器中的 HTML 内容保存到本地存储中，并弹出提示框告知用户内容已保存。

上一篇：html头部标签

下一篇：section html