如何在React应用中实现带格式编辑的多行文本框并保存样式

核心思路 #

基于contenteditable属性搭建可编辑区域，搭配工具栏按钮触发格式调整，同时把格式化后的HTML内容存入useState中。

实现步骤 #

1. 基础组件结构 #

构建包含工具栏和编辑区的组件，用useState维护编辑内容：

import { useState } from 'react';

const RichTextEditor = () => {
  const [content, setContent] = useState('');

  return (
    <div className="editor-container">
      {/* 工具栏 */}
      <div className="toolbar">
        <button onClick={() => formatText('bold')}>加粗</button>
        <button onClick={() => formatText('italic')}>斜体</button>
        <button onClick={() => formatText('underline')}>下划线</button>
        <select onChange={(e) => changeFont(e.target.value)}>
          <option value="">默认字体</option>
          <option value="Arial">Arial</option>
          <option value="Georgia">Georgia</option>
          <option value="Courier New">Courier New</option>
        </select>
        <input 
          type="color" 
          onChange={(e) => formatText('foreColor', e.target.value)}
        />
      </div>
      {/* 可编辑区域 */}
      <div
        className="editor"
        contentEditable
        dangerouslySetInnerHTML={{ __html: content }}
        onBlur={(e) => setContent(e.currentTarget.innerHTML)}
      />
    </div>
  );
};

export default RichTextEditor;

2. 格式操作函数 #

编写formatText和changeFont函数，借助document.execCommand实现格式调整（注：该API虽标记为废弃，但主流浏览器仍支持；若需更稳定方案，可选用专业富文本框架）：

const formatText = (command, value = null) => {
  document.execCommand(command, false, value);
  // 触发blur更新state，再重新聚焦保持编辑状态
  const editor = document.querySelector('.editor');
  editor.blur();
  editor.focus();
};

const changeFont = (font) => {
  document.execCommand('fontName', false, font);
  const editor = document.querySelector('.editor');
  editor.blur();
  editor.focus();
};

3. 基础样式 #

添加CSS保证编辑器布局和交互体验：

.editor-container {
  width: 600px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.toolbar {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
}

.toolbar button, .toolbar select, .toolbar input {
  margin-right: 8px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.editor {
  min-height: 200px;
  padding: 10px;
  outline: none;
}

进阶优化建议 #

• 若追求更现代化的实现，可选用Slate.js、Tiptap或Draft.js等专业富文本库，摆脱对document.execCommand的依赖
• 增加内容校验逻辑，防止恶意HTML注入
• 新增内容预览功能，直观查看最终效果

内容的提问来源于stack exchange，提问作者user9102262