js 富文本编辑器

作者：末世修罗发布日期:2026-01-29 浏览:81

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 富文本编辑器示例</title>
    <style>
        #editor {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 200px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>富文本编辑器示例</h1>
    <div id="editor" contenteditable="true"></div>
    <button onclick="getEditorContent()">获取内容</button>
    <script>
        function getEditorContent() {
            // 获取富文本编辑器的内容
            var content = document.getElementById('editor').innerHTML;
            alert(content);
        }

        // 初始化富文本编辑器样式和功能
        document.addEventListener('DOMContentLoaded', function () {
            var editor = document.getElementById('editor');
            editor.style.webkitUserModify = 'read-write-plaintext-only'; // 允许编辑

            // 添加一些基本的富文本编辑功能（如加粗、斜体等）
            document.execCommand('defaultParagraphSeparator', false, 'p'); // 默认段落格式为<p>
        });
    </script>
</body>
</html>

解释说明：

HTML结构：
- 创建了一个 div 元素作为富文本编辑器，使用 contenteditable="true" 属性使其可编辑。
- 添加了一个按钮用于获取编辑器中的内容。
CSS样式：
- 给编辑器添加了边框、内边距、最小高度和宽度，以确保其外观更像一个编辑器。
JavaScript代码：
- getEditorContent() 函数用于获取编辑器中的 HTML 内容，并通过 alert 显示出来。
- 在页面加载时初始化编辑器，设置默认段落格式为 <p> 标签，并允许用户修改内容。

这个简单的示例展示了如何使用纯 JavaScript 创建一个基础的富文本编辑器。你可以根据需要扩展更多功能，比如添加工具栏按钮来实现加粗、斜体、颜色选择等功能。

上一篇：js 在线编辑器

下一篇：js 文本编辑器