React JS自定义样式输入框开发需求：支持格式自定义选择

核心功能说明 #

• 支持切换字体样式（如Arial、宋体、Consolas等）
• 可选项目符号类型（圆点、数字、破折号）并格式化列表内容
• 支持指定代码语言（JavaScript、Python等）生成带标识的代码块
• 最终输出JSON格式的HTML内容

组件实现方案 #

1. 状态定义 #

使用React useState管理组件核心状态：

import { useState } from 'react';

const FormattedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [selectedFont, setSelectedFont] = useState('Arial');
  const [bulletStyle, setBulletStyle] = useState('disc');
  const [codeLanguage, setCodeLanguage] = useState('javascript');
  const [formattedHtml, setFormattedHtml] = useState('');

2. 格式化逻辑实现 #

字体格式化

将内容包裹在指定字体的<span>标签中：

const applyFont = (content) => {
  return `<span style="font-family: ${selectedFont}">${content}</span>`;
};

项目符号格式化

将多行内容转为对应样式的列表：

const applyBullet = (content) => {
  const lines = content.split('\n').filter(line => line.trim() !== '');
  if (lines.length === 0) return content;
  
  const listTag = bulletStyle === 'decimal' ? 'ol' : 'ul';
  const listItems = lines.map(line => `<li>${line.trim()}</li>`).join('');
  return `<${listTag} style="list-style-type: ${bulletStyle === 'dash' ? 'none' : bulletStyle}">${listItems}</${listTag}>`;
};

注：破折号样式通过list-style-type: none配合自定义前缀实现，可根据需求调整

代码块格式化

生成带语言标识的代码块标签：

const applyCodeFormat = (content) => {
  return `<pre><code class="language-${codeLanguage}">${content}</code></pre>`;
};

3. 整合格式化与JSON输出 #

添加触发按钮，整合所有格式化规则并输出JSON：

const handleFormat = () => {
  let html = inputValue;
  
  // 按用户选择的规则依次应用格式化
  if (selectedFont !== 'Arial') html = applyFont(html);
  if (bulletStyle) html = applyBullet(html);
  // 可添加开关控制是否启用代码格式化，此处默认启用
  html = applyCodeFormat(html);
  
  setFormattedHtml(html);
};

const getJsonOutput = () => {
  return JSON.stringify({ formattedHtml }, null, 2);
};

4. 组件渲染结构 #

return (
  <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
    <div style={{ marginBottom: '15px', display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
      <div>
        <label style={{ marginRight: '8px' }}>字体：</label>
        <select value={selectedFont} onChange={(e) => setSelectedFont(e.target.value)}>
          <option value="Arial">Arial</option>
          <option value="SimSun">宋体</option>
          <option value="Microsoft YaHei">微软雅黑</option>
          <option value="Consolas">Consolas</option>
        </select>
      </div>

      <div>
        <label style={{ marginRight: '8px' }}>项目符号：</label>
        <select value={bulletStyle} onChange={(e) => setBulletStyle(e.target.value)}>
          <option value="disc">圆点</option>
          <option value="decimal">数字</option>
          <option value="dash">破折号</option>
        </select>
      </div>

      <div>
        <label style={{ marginRight: '8px' }}>代码类型：</label>
        <select value={codeLanguage} onChange={(e) => setCodeLanguage(e.target.value)}>
          <option value="javascript">JavaScript</option>
          <option value="python">Python</option>
          <option value="html">HTML</option>
        </select>
      </div>

      <button onClick={handleFormat} style={{ padding: '4px 12px' }}>格式化内容</button>
    </div>

    <textarea
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="输入需要格式化的内容..."
      rows={10}
      style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
    />

    <div style={{ marginTop: '20px' }}>
      <h3>JSON格式输出：</h3>
      <pre style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>{getJsonOutput()}</pre>
    </div>
  </div>
);
};

export default FormattedInput;

额外提示 #

• 若需更复杂的富文本编辑能力，可考虑集成Quill或Draft.js等专业库
• 若处理用户输入的不可信内容，需添加XSS防护（如使用DOMPurify清理HTML）

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