Office UI Fabric React多行TextField替代方案及富文本处理问题

我来帮你梳理下针对这个问题的具体解决方案，核心要解决两个点：一是剥离HTML标签显示纯文本，二是找到能适配富文本的编辑控件。

1. 只读场景：快速将HTML转为纯文本 #

如果只是需要展示富文本列的纯文本内容，不需要编辑，可以先写个工具函数剥离HTML标签，再传给多行TextField：

// 工具函数：移除所有HTML标签，提取纯文本
const stripHtmlTags = (htmlContent: string): string => {
  if (!htmlContent) return '';
  // 利用临时DOM元素解析HTML并提取文本
  const tempElement = document.createElement('div');
  tempElement.innerHTML = htmlContent;
  return tempElement.textContent || tempElement.innerText || '';
};

// 使用示例
<TextField 
  multiline 
  autoAdjustHeight 
  value={stripHtmlTags(yourSharePointRichTextValue)} 
  name="textareaField" 
  readOnly // 只读场景建议加上这个属性
/>

这样就能把带<div>标签的内容转换成干净的Actual data here显示了。

2. 编辑场景：用RichTextEditor处理富文本 #

如果需要编辑这个富文本列的内容，Office UI Fabric（现在已合并到Fluent UI）提供了RichTextEditor控件，它可以直接解析、渲染HTML内容，也支持用户编辑富文本，完美匹配SharePoint多行富文本列的存储格式。

代码示例 #

首先确保项目安装了@fluentui/react包（如果没装，执行npm install @fluentui/react），然后在组件中使用：

import { RichTextEditor, RichTextEditorFormattingOptions } from '@fluentui/react';

// 定义允许的富文本格式选项（按需调整）
const allowedFormats: RichTextEditorFormattingOptions = {
  bold: true,
  italic: true,
  underline: true,
  bulletedList: true,
  numberedList: true,
};

// 组件内使用
<RichTextEditor
  value={yourSharePointRichTextValue} // 直接传入带HTML的原始数据
  onChange={(event, updatedValue) => {
    // updatedValue是带HTML标签的富文本，可直接保存回SharePoint列表
    console.log('更新后的富文本内容:', updatedValue);
    // 这里添加你的保存逻辑
  }}
  formattingOptions={allowedFormats}
  placeholder="请输入内容..."
/>

这个控件会自动渲染HTML内容，不会显示原始标签，同时支持用户编辑富文本，编辑后的输出格式也完全符合SharePoint富文本列的要求。

额外补充：只读富文本展示 #

如果只是展示富文本但不需要编辑，还可以用更轻量的RichText组件：

import { RichText } from '@fluentui/react';

<RichText content={yourSharePointRichTextValue} />

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