js 实现富文本编辑器
实现富文本编辑器的核心方法
使用contenteditable属性
通过HTML的contenteditable属性快速创建可编辑区域：
<div id="editor" contenteditable="true"></div>结合CSS定义编辑区域样式：
#editor {
min-height: 200px;
border: 1px solid #ccc;
padding: 10px;
}基本命令操作
通过document.execCommand执行格式化命令（注意：该API已废弃，但部分场景仍可用）：
function formatText(command, value = null) {
document.execCommand(command, false, value);
}
// 示例：加粗选中文本
formatText('bold');现代API替代方案
使用Selection和Range API实现更精细的控制：
function insertHtml(html) {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
range.deleteContents();
const fragment = range.createContextualFragment(html);
range.insertNode(fragment);
}
}工具栏实现
创建带有事件监听的格式工具栏：
<div class="toolbar">
<button data-command="bold">加粗</button>
<button data-command="italic">斜体</button>
<input type="color" onchange="formatText('foreColor', this.value)">
</div>JavaScript事件绑定：
document.querySelectorAll('.toolbar button').forEach(btn => {
btn.addEventListener('click', () => {
formatText(btn.dataset.command);
});
});内容状态管理
监听输入事件并保存内容：
const editor = document.getElementById('editor');
editor.addEventListener('input', () => {
const content = editor.innerHTML;
// 保存或处理内容
});高级功能实现
-
自定义快捷键：
editor.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key === 'b') { e.preventDefault(); formatText('bold'); } }); -
图片上传处理：
function handleImageUpload(file) { const reader = new FileReader(); reader.onload = (e) => { insertHtml(`<img src="${e.target.result}">`); }; reader.readAsDataURL(file); } -
内容过滤（防XSS）：
function sanitize(html) { const temp = document.createElement('div'); temp.textContent = html; return temp.innerHTML; }
第三方库推荐
- ProseMirror：模块化架构，适合需要自定义Schema的场景
- Tiptap：基于ProseMirror的友好封装
- Quill：提供丰富的主题和模块
- CKEditor 5：企业级解决方案
现代开发建议
- 优先考虑使用现有的开源库
- 需要自定义功能时采用组合式开发
- 移动端需特别注意触摸事件处理
- 实现撤销/重做功能可使用Command Pattern
性能优化要点
- 对高频操作进行防抖处理
- 大型文档采用虚拟滚动
- 复杂操作使用requestIdleCallback
- 定期清理无用的DOM节点
