登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > JS富文本编辑器替代方案推荐

JS富文本编辑器替代方案推荐

2025-10-14 22:24:52 0浏览 收藏

从现在开始，努力学习吧！本文《JS 富文本编辑器替代方案解析》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

放弃 document.execCommand 后，应采用现代方案：使用 contenteditable 结合 DOM 操作与事件监听实现加粗等样式控制，通过 Range 和 Selection 管理选区，利用 JSON 状态管理支持撤销重做，构建工具栏并处理列表、链接、图片、表格等复杂格式，结合虚拟 DOM 框架优化开发，使用 polyfill 或库解决跨浏览器问题，并通过减少 DOM 操作、节流防抖、懒加载等手段提升性能。

JS 富文本编辑器开发 - 操作 document.execCommand 的现代替代方案

放弃 document.execCommand 是正确的方向。它过时、兼容性差，而且在现代 Web 开发中有很多更好的选择。

解决方案

现代替代方案的核心在于直接操作 DOM，并结合内容可编辑的 div 或 iframe。这赋予你完全的控制权，并且可以更好地适应不同的浏览器和设备。

  1. 使用 contenteditable 属性: 让一个 div 变成富文本编辑器，只需设置 contenteditable="true"。

    <div id="editor" contenteditable="true">
  <p>这是一个可以编辑的段落。</p>
</div>

  2. 监听事件: 监听键盘事件、鼠标事件等，来触发你的编辑逻辑。例如，按下 Ctrl+B 时，应用加粗样式。

  3. 操作 DOM: 使用 JavaScript 的 DOM API (例如 document.createElement, Node.appendChild, Node.removeChild, Range 和 Selection 对象) 来修改编辑器中的内容。

    document.getElementById('editor').addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'b') {
    event.preventDefault(); // 阻止默认行为

    // 获取当前选区
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    const range = selection.getRangeAt(0);

    // 创建一个 <b> 元素
    const boldElement = document.createElement('b');
    boldElement.appendChild(range.extractContents());
    range.insertNode(boldElement);

    // 清除选区
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

  4. 状态管理: 维护一个内部的状态表示，例如使用 JSON 数据结构来描述编辑器的内容和样式。这可以方便地实现撤销/重做、数据持久化等功能。

  5. 工具栏: 创建一个工具栏，包含各种编辑按钮 (加粗、斜体、颜色等)。点击按钮时，执行相应的 DOM 操作。

如何处理复杂的富文本格式？

富文本格式远不止加粗和斜体。处理列表、链接、图片、表格等复杂格式需要更精细的 DOM 操作和状态管理。