当前位置：首页 > JavaScript

js实现文本编辑器

2026-01-30 12:39:14JavaScript

实现基础文本编辑器

使用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);
    }
});

js实现文本编辑器