登录
首页 >  文章 >  前端

JS实现富文本编辑器教程

时间：2025-10-01 16:11:29 221浏览 收藏

想要打造一款功能强大的富文本编辑器吗？本文将为你揭秘如何使用 JavaScript 原生方法实现富文本编辑器的核心功能。通过 `contenteditable` 属性启用编辑模式，结合 `execCommand` 命令（或现代的 Selection 和 Range API）实现文本格式化，例如加粗、斜体和插入链接。文章将详细介绍如何绑定工具栏按钮，监听用户操作，并利用 `innerHTML` 获取和保存编辑后的富文本内容。此外，还提供了一系列增强功能建议，助你打造更完善的富文本编辑器。尽管 `execCommand` 已被弃用，但本文的讲解仍能帮助你理解富文本编辑器的底层原理，为后续使用高级库（如 Slate.js、ProseMirror 或 TinyMCE）进行二次开发打下坚实基础。

答案：通过contenteditable启用编辑，结合execCommand执行格式化，绑定按钮操作实现加粗、斜体、链接等，利用innerHTML获取内容并保存，配合事件监听与Range API增强交互。

如何实现一个JavaScript的富文本编辑器？

实现一个 JavaScript 富文本编辑器，核心是利用浏览器原生的 contenteditable 属性结合 Document.execCommand（或现代的 Selection 和 Range API）来捕获用户输入并施加格式。虽然 execCommand 已被弃用，但在许多实际场景中仍广泛使用。以下是实现的基本思路和关键步骤。

启用 contenteditable

让任意元素变成可编辑区域：

这个 div 现在可以像 textarea 一样输入内容，同时支持内联 HTML 标签如 、 等。

绑定工具栏按钮

创建一组按钮用于加粗、斜体、插入链接等操作：

为按钮添加事件监听：

document.querySelectorAll('[data-command]').forEach(button => {
  button.addEventListener('click', () => {
    const command = button.getAttribute('data-command');
    let arg = null;
    if (command === 'createLink') {
      arg = prompt('输入链接地址：');
    }
    document.execCommand(command, false, arg);
  });
});

点击按钮会执行对应命令，浏览器自动修改选中内容的格式。

获取和保存内容

编辑完成后，通过 innerHTML 获取富文本内容：

const content = document.getElementById('editor').innerHTML;

将 content 存入数据库或表单提交即可。展示时直接用 innerHTML 渲染（注意防范 XSS）。

增强功能建议

  • 监听 input 事件实时保存草稿
  • 使用 Selection 和 Range API 实现更精确的光标控制
  • 封装命令为函数，便于扩展自定义样式
  • 添加图片上传功能：通过 FileReader 将 base64 插入或上传后插入外链 img
  • 使用 MutationObserver 监控结构变化，保持内容纯净

基本上就这些。不复杂但容易忽略细节，比如光标丢失、跨浏览器兼容性、撤销栈行为等。若需生产级功能，推荐基于 Slate.js、ProseMirror 或 TinyMCE 二次开发，但理解原生实现有助于更好地驾驭高级库。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    立即学习 543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    立即学习 516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    立即学习 500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    立即学习 487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    立即学习 485次学习