如何在JavaScript与React中展示含<p>标签的CKEditor保存文本？

嘿，作为JavaScript和React新手，遇到CKEditor输出的HTML转义内容没法正常渲染的问题太常见了！我来帮你一步步解决。

首先，你的myString里是转义后的HTML实体（比如<p>对应<p>），直接在React里渲染的话，它会把这些当成纯文本显示，而不是解析成真正的HTML元素。要解决这个问题，我们需要两步：把转义的内容解码回原始HTML，然后告诉React去渲染这些HTML。

第一步：解码转义的HTML字符串 #

我们可以写一个简单的辅助函数，利用浏览器的DOM解析能力来解码这些实体：

function decodeHtml(html) {
  const tempTextarea = document.createElement("textarea");
  tempTextarea.innerHTML = html;
  return tempTextarea.value;
}

这个函数的原理是：当我们把转义的HTML赋值给textarea的innerHTML时，浏览器会自动把实体解码成对应的HTML标签，然后我们通过value拿到解码后的原始HTML字符串。

第二步：用React的dangerouslySetInnerHTML渲染HTML #

React默认会转义所有内容来防止XSS攻击，所以要渲染真正的HTML，必须使用dangerouslySetInnerHTML属性（名字虽然吓人，但只要你的内容是可信的——比如来自自己的CKEditor——就不用担心）。

完整的组件示例：

import React from 'react';

function decodeHtml(html) {
  const tempTextarea = document.createElement("textarea");
  tempTextarea.innerHTML = html;
  return tempTextarea.value;
}

export default function HtmlRenderer() {
  const myString = "<p>Cumque et blanditiis magnam optio amet. Eum eos et et et sit autem optio. Asperiores fuga iure quis sequi voluptas laboriosam et.</p> <div className={'myclass'}>myString</div>";
  const decodedHtml = decodeHtml(myString);

  return (
    {/* 用dangerouslySetInnerHTML渲染解码后的HTML */}
    <div dangerouslySetInnerHTML={{ __html: decodedHtml }} />
  );
}

额外小提示：检查CKEditor的输出设置 #

如果你是直接从CKEditor获取数据的话，其实CKEditor默认返回的是原始HTML字符串，不需要转义。比如CKEditor 5里调用editor.getData()就能拿到未转义的HTML。如果你的myString是从后端拿到的转义后内容，那上面的方法就适用；如果是你自己处理时不小心转义了，可以调整CKEditor的输出逻辑，省了解码这一步。

安全提醒 #

如果你的内容来自未知用户的输入（不是自己的CKEditor），一定要做XSS过滤，比如使用DOMPurify库来清理HTML，避免恶意脚本注入。但如果是你自己通过CKEditor编辑的内容，风险就很低了。

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