js实现文本编辑器
实现基础文本编辑器
使用HTML的contenteditable属性快速创建一个可编辑区域，结合JavaScript监听用户输入和操作。以下是一个简单实现：
<div id="editor" contenteditable="true" style="min-height: 200px; border: 1px solid #ccc;"></div>
<button onclick="formatText('bold')">加粗</button>
<button onclick="formatText('italic')">斜体</button>function formatText(command) {
document.execCommand(command, false, null);
document.getElementById('editor').focus();
}使用第三方库
对于更复杂的需求，推荐使用现成的开源库：
- Quill.js：模块化设计，支持自定义工具栏和格式
- TinyMCE：功能全面，支持图片上传等高级功能
- ProseMirror：适合需要精细控制编辑体验的场景
安装Quill示例：
npm install quill基本使用：
import Quill from 'quill';
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic'],
['link', 'image']
]
}
});实现自定义功能
添加图片上传功能示例：
document.getElementById('image-upload').addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
const range = quill.getSelection();
quill.insertEmbed(range.index, 'image', event.target.result);
};
reader.readAsDataURL(file);
}
});处理编辑器内容
获取和设置编辑器内容：
// 获取HTML内容
const content = quill.root.innerHTML;
// 设置内容
quill.clipboard.dangerouslyPasteHTML('<p>初始内容</p>');
// 获取纯文本
const text = quill.getText();实现协同编辑
使用Socket.io实现实时协作：
socket.on('text-change', (delta) => {
quill.updateContents(delta);
});
quill.on('text-change', (delta, oldDelta, source) => {
if (source === 'user') {
socket.emit('text-change', delta);
}
});
