React应用中TinyMCE保存后代码无法像编辑时那样高亮显示怎么办

问题核心原因 #

TinyMCE编辑状态下的代码高亮是编辑器内置codesample插件自带的渲染能力，你持久化存储的内容仅为带<pre>、<code>标签和语言标识类名的HTML片段，预览页面没有加载对应的代码高亮库做二次渲染，自然无法复现编辑时的高亮效果。

1. 确认编辑器输出配置 #

首先检查TinyMCE的codesample插件配置，确保输出的HTML片段中code标签携带了正确的语言类名（默认规则为language-xxx，xxx对应语言标识），参考配置如下：

tinymce.init({
  selector: '#editor',
  plugins: 'codesample',
  toolbar: 'codesample',
  // 自定义支持的语言列表，可按需扩展
  codesample_languages: [
    { text: 'JavaScript', value: 'javascript' },
    { text: 'HTML', value: 'html' },
    { text: 'CSS', value: 'css' },
    { text: 'Java', value: 'java' }
  ]
})

2. 预览页接入高亮库 #

你可以选择Prism.js或者Highlight.js作为高亮渲染库，以下以React项目中接入Prism.js为例：

• 第一步：安装依赖
  npm install prismjs

• 第二步：编写预览组件，在内容更新时触发高亮渲染

import { useEffect } from 'react'
import Prism from 'prismjs'
// 引入高亮主题，可按需替换为prism自带的其他主题
import 'prismjs/themes/prism-tomorrow.css'
// 按需引入需要支持的语言包
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-html'
import 'prismjs/components/prism-css'

const ContentPreview = ({ htmlContent }) => {
  useEffect(() => {
    // 每次内容更新后重新扫描所有code标签做高亮处理
    Prism.highlightAll()
  }, [htmlContent])

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
}

3. 补充基础样式适配 #

可以给代码块添加通用基础样式，保证展示效果和编辑态一致：

pre {
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 12px 0;
}
code {
  font-family: Consolas, Monaco, monospace;
  font-size: 14px;
}

• 选择高亮库的主题时尽量和TinyMCE编辑时使用的codesample主题对齐，可实现编辑、预览效果完全一致
• 如果使用Highlight.js，逻辑和Prism.js类似，安装后引入对应主题和语言包，内容更新时调用hljs.highlightAll()即可

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