JavaScript 如何做富文本

在日常开发中，我们常常会遇到需要让用户自由输入带格式内容的场景——比如写博客时要给文字加个加粗、发评论时插张图片，或是整理笔记时分段落列清单。这些带字体、排版、多媒体的内容，就是我们常说的“富文本”。对前端开发者来说，用JavaScript实现富文本编辑，其实并不像听起来那么复杂，核心就是利用浏览器自带的“编辑模式”，再结合一些简单的API就能实现。

第一步：让页面变成“可编辑的画布”

要做富文本，首先得让普通的网页区域变成能输入、能改格式的编辑区。最简单的办法，就是给这个区域加一个contenteditable属性，把它的值设为true。

举个例子：你可以在页面里放一个<div>标签，给它加上这个属性，打开网页后点击这个div，就能像操作Word文档一样输入文字了。比如我们做一个简单的笔记框，代码大概是这样的：

`html

<div id="noteEditor" contenteditable="true" style="border:1px solid #ccc; padding:10px; min-height:200px;">

在这里输入你的笔记吧...

</div>

`

就像把一张普通的纸变成了可涂鸦的白板，这一步就是把静态区域变成了能编辑的“画布”，是做富文本的基础。

第二步：用简单命令改格式，不用复杂代码

有了编辑区，接下来要解决的是“怎么给文字加粗、加斜体”这类需求。这时候不用写一堆CSS或者DOM操作代码，浏览器早就准备好现成的“格式命令”了，用JavaScript的document.execCommand()方法就能直接调用。

比如要给选中的文字加粗，只需要写一行代码：

`javascript

document.execCommand('bold', false, null);

`

这个方法的第一个参数就是格式命令，除了bold（加粗），还有italic（斜体）、underline（下划线）、insertImage（插入图片）、insertUnorderedList（无序列表）这些常用功能，每个命令都对应一个你能看懂的操作。

举个生活化的例子，就像你在手机输入法里长按选中文字，点“加粗”按钮就能变格式——这里的execCommand就是帮你实现“点按钮改格式”的工具。你可以在页面上做几个小按钮，点击时触发对应的命令：

`html

<button false, null)">加粗</button>

<button false, null)">斜体</button>

<button false, null)">项目符号</button>

`

用户选中一段文字，再点按钮，就能直接看到格式变化，整个交互和普通的富文本编辑器没什么区别。

第三步：处理特殊内容，让富文本更实用

有时候光改文字格式还不够，比如要在评论里插一张表情包，或者在笔记里加个链接。这时候execCommand的第三个参数就派上用场了，它用来传需要插入的内容，比如插入图片可以写：

`javascript

// 点击按钮后，插入用户输入的图片地址

function insertImg() {

const imgUrl = prompt("请输入图片地址：");

if (imgUrl) document.execCommand('insertImage', false, imgUrl);

}

`

这个功能就像你发朋友圈时点“添加图片”，输入地址后，图片就直接插在光标位置了。另外要注意，execCommand虽然好用，但因为是浏览器自带的功能，在不同浏览器里会有细微差异，不过日常用在普通的编辑场景里完全足够。

小提醒：避开常见的小问题

虽然用JavaScript做富文本很简单，但有两个小坑要注意：一是不要随意清空编辑区的内容，不然execCommand可能会失效；二是如果要保存富文本内容，直接拿编辑区的innerHTML就行，因为它会自动把格式转成HTML代码（比如加粗的文字会被包在标签里），保存后再渲染到页面上就能还原格式。

总的来说，JavaScript做富文本的核心思路，就是用contenteditable开启编辑能力，再用现成的格式命令实现常用功能——不需要复杂的框架，就能做出满足日常需求的简单富文本工具。