如何在React JS中创建支持粗斜体与标签解析的可编辑文本域

问题分析 #

你当前使用的<textarea>仅能渲染纯文本，无法解析<b>/<i>这类HTML标签，也不支持富文本格式编辑。要满足需求，需要替换为支持HTML渲染与富文本编辑的组件，以下提供两种可行方案：

一、原生React实现方案 #

核心思路 #

1. 用带contenteditable属性的<div>替代<textarea>，支持HTML内容渲染
2. 通过document.execCommand实现加粗、斜体的格式切换
3. 利用CSS的resize属性实现可调整大小
4. 监听input/blur事件同步编辑内容到父组件

代码实现 #

import { useRef, useEffect } from 'react';

const EditableRichText = ({ value, setValue, rows = 3, style, className }) => {
  const editorRef = useRef(null);

  // 初始化渲染HTML内容
  useEffect(() => {
    if (editorRef.current && value) {
      editorRef.current.innerHTML = value;
    }
  }, [value]);

  // 同步编辑内容到父组件
  const handleContentChange = () => {
    if (editorRef.current) {
      setValue(editorRef.current.innerHTML);
    }
  };

  // 切换格式：加粗/斜体
  const toggleFormat = (command) => {
    document.execCommand(command, false, null);
    editorRef.current?.focus();
  };

  return (
    <div style={{ ...style, position: 'relative' }}>
      {/* 格式工具栏 */}
      <div style={{ marginBottom: '8px' }}>
        <button onClick={() => toggleFormat('bold')} style={{ marginRight: '8px', padding: '4px 8px' }}>
          <strong>B</strong>
        </button>
        <button onClick={() => toggleFormat('italic')} style={{ padding: '4px 8px' }}>
          <em>I</em>
        </button>
      </div>
      {/* 可编辑富文本区域 */}
      <div
        ref={editorRef}
        contentEditable
        onInput={handleContentChange}
        onBlur={handleContentChange}
        style={{
          minHeight: `${rows * 24}px`,
          padding: '8px',
          border: '1px solid #ccc',
          borderRadius: '4px',
          resize: 'vertical',
          overflow: 'auto',
          ...style
        }}
        className={className}
      />
    </div>
  );
};

export default EditableRichText;

使用示例 #

import { useState } from 'react';
import EditableRichText from './EditableRichText';

const App = () => {
  const [textContent, setTextContent] = useState('<b>the question</b> <i>the answer</i>');
  
  return (
    <div style={{ maxWidth: '600px', margin: '20px auto' }}>
      <EditableRichText value={textContent} setValue={setTextContent} />
      <div style={{ marginTop: '16px' }}>
        <strong>当前编辑内容（HTML格式）：</strong>
        <p>{textContent}</p>
      </div>
    </div>
  );
};

二、第三方库方案（以React Quill为例） #

核心思路 #

1. 使用React Quill轻量富文本编辑器，默认支持加粗、斜体格式
2. 配置工具栏仅保留所需的格式选项
3. 自动解析传入的HTML标签内容，无需手动处理
4. 内置支持调整大小（可通过CSS自定义样式）

代码实现 #

首先安装依赖：

npm install react-quill quill

编写编辑器组件：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const RichTextEditor = ({ value, setValue, style, className }) => {
  // 配置工具栏：仅保留加粗、斜体按钮
  const modules = {
    toolbar: [['bold', 'italic']]
  };

  return (
    <ReactQuill
      value={value}
      onChange={setValue}
      modules={modules}
      style={{ ...style, resize: 'vertical', overflow: 'auto' }}
      className={className}
      theme="snow"
    />
  );
};

export default RichTextEditor;

使用示例 #

import { useState } from 'react';
import RichTextEditor from './RichTextEditor';

const App = () => {
  const [textContent, setTextContent] = useState('<b>the question</b> <i>the answer</i>');
  
  return (
    <div style={{ maxWidth: '600px', margin: '20px auto' }}>
      <RichTextEditor value={textContent} setValue={setTextContent} />
      <div style={{ marginTop: '16px' }}>
        <strong>当前编辑内容（HTML格式）：</strong>
        <p>{textContent}</p>
      </div>
    </div>
  );
};

注意事项 #

• 原生方案使用的document.execCommand虽已标记为废弃，但目前主流浏览器仍支持，适合简单富文本场景
• 第三方库方案稳定性更强，扩展性更好，适合复杂富文本需求
• 若需防范XSS攻击，需对传入的HTML内容进行过滤（如使用DOMPurify处理后再渲染）

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