如何渲染Tiny文本编辑器生成的HTML字符串数据？

1. 把Tiny输出的HTML字符串渲染到独立区块（React环境） #

因为你用的是Tiny的React集成，直接利用React的dangerouslySetInnerHTML属性就能将HTML字符串渲染为真实DOM：

基础实现 #

import React from 'react';

// 示例：从Tiny编辑器获取的HTML字符串
const tinyOutputHtml = '<a href="xxx"><img src="xxx" alt="图片描述" /></a>';

// 封装独立预览组件
const RichTextPreview = ({ html }) => {
  return (
    <div className="rich-text-preview">
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

// 组件使用示例
function App() {
  return <RichTextPreview html={tinyOutputHtml} />;
}

export default App;

如果需要渲染到<strong>容器中，直接替换外层标签即可：

const RichTextPreview = ({ html }) => {
  return (
    <strong className="rich-text-preview">
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </strong>
  );
};

安全防护提示 #

直接渲染原始HTML存在XSS风险，建议用dompurify过滤恶意代码：

npm install dompurify

import DOMPurify from 'dompurify';

const RichTextPreview = ({ html }) => {
  const sanitizedHtml = DOMPurify.sanitize(html);
  return (
    <div className="rich-text-preview">
      <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
    </div>
  );
};

2. 实现类似Stack Overflow/Medium的富文本编辑+独立渲染方案 #

核心架构 #

拆分编辑区和预览区两个独立模块：

• 编辑区：基于Tiny编辑器定制工具栏，保留标题、粗体、斜体、代码块、链接、图片上传等核心功能
• 预览区：实时或按需渲染Tiny输出的HTML，适配阅读类平台的样式风格

关键配置与优化 #

（1）定制Tiny工具栏

调整编辑器配置，贴合Stack Overflow的简洁风格：

import { Editor } from '@tinymce/tinymce-react';

function RichTextEditor({ onEditorChange }) {
  return (
    <Editor
      apiKey="你的API_KEY"
      initialValue=""
      init={{
        height: 500,
        menubar: false,
        toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | code link image | bullist numlist',
        plugins: 'code link image lists',
        // 配置图片上传接口（替换为你的后端上传地址）
        images_upload_url: '/api/upload-image',
      }}
      onEditorChange={onEditorChange}
    />
  );
}

（2）预览模式实现

• 实时预览：监听onEditorChange事件，同步更新预览区内容
• 按需预览：添加「预览」按钮，点击后切换到纯预览模式

（3）阅读样式适配

给预览区添加类似Medium/Stack Overflow的排版样式：

.rich-text-preview {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.rich-text-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.rich-text-preview a {
  color: #0077cc;
  text-decoration: none;
}

.rich-text-preview a:hover {
  text-decoration: underline;
}

.rich-text-preview code {
  background-color: #f6f8fa;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.rich-text-preview pre {
  background-color: #f6f8fa;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
}

（4）数据流转

• 编辑完成后，将Tiny输出的HTML字符串存入后端数据库
• 展示时，从后端读取HTML，经过净化后渲染到预览区

3. 可选替代方案 #

如果不想直接操作HTML字符串，可考虑：

• Markdown中间格式：启用Tiny的Markdown插件，编辑时生成Markdown文本，渲染时用react-markdown转成HTML，安全性更高
• 富文本JSON格式：配置Tiny的content_format: 'json'，输出结构化JSON内容，渲染时用组件解析JSON生成DOM

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