当前位置：首页 > JavaScript

js实现富文本编辑器

2026-03-01 09:15:56JavaScript

实现富文本编辑器的基本方法

使用JavaScript实现富文本编辑器可以基于浏览器内置的contenteditable属性或第三方库。以下是两种常见实现方式：

基于contenteditable的原生实现

利用HTML的contenteditable属性创建一个可编辑区域，结合document.execCommand执行格式化命令：

<div id="editor" contenteditable="true"></div>
<button onclick="formatText('bold')">加粗</button>
<button onclick="formatText('italic')">斜体</button>

<script>
function formatText(cmd) {
    document.execCommand(cmd, false, null);
    document.getElementById('editor').focus();
}
</script>

关键API说明：

document.execCommand支持的命令包括bold、italic、insertImage等
可通过getSelection获取当前选区对象
使用Range对象控制选区范围

使用第三方库（推荐方案）

主流富文本编辑器库及其特点：

Quill.js

模块化设计，支持自定义扩展

示例代码：

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: { toolbar: true }
});

TinyMCE
- 企业级功能（表格、图片上传等）
- 需要API key（免费版）：
```
tinymce.init({ selector: '#editor' });
```
CKEditor 5
- 现代架构，支持React/Vue集成
- 经典编辑器初始化：
```
ClassicEditor.create(document.querySelector('#editor'));
```

核心功能实现要点

光标与选区处理

const selection = window.getSelection();
const range = selection.getRangeAt(0);

自定义按钮功能

function insertHTML(html) {
    const selection = window.getSelection();
    if (selection.rangeCount) {
        const range = selection.getRangeAt(0);
        range.deleteContents();
        const div = document.createElement('div');
        div.innerHTML = html;
        const frag = document.createDocumentFragment();
        while (div.firstChild) frag.appendChild(div.firstChild);
        range.insertNode(frag);
    }
}

内容获取与设置

// 获取HTML内容
const content = document.getElementById('editor').innerHTML;

// 设置内容
document.getElementById('editor').innerHTML = '<p>预设内容</p>';

进阶功能实现

图片上传处理

function handleImageUpload(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
        const img = document.createElement('img');
        img.src = e.target.result;
        document.execCommand('insertImage', false, img.src);
    };
    reader.readAsDataURL(file);
}

撤销/重做功能

js实现富文本编辑器

const history = [];
let historyIndex = -1;

function saveState() {
    const content = editor.innerHTML;
    history.length = historyIndex + 1;
    history.push(content);
    historyIndex++;
}