Strapi WYSIWYG markdown 编辑器中的上标和下标答案

【问题标题】：Superscripts and subscripts in strapi WYSIWYG markdown editorStrapi WYSIWYG markdown 编辑器中的上标和下标
【发布时间】：2019-07-15 09:02:49
【问题描述】：

我正在使用 Strapi cms 添加将通过 api 提供给移动应用程序的内容。我有一个名为文章的内容，我正在使用 strapi 提供的 WYSIWYG 降价编辑器。我想在我的内容中添加下标和上标。有人可以帮忙吗？这是strapi提供的markdown编辑器特有的。

【问题讨论】：

【解决方案1】：

Markdown 不包括对下标或上标的任何原生支持。正如rules 解释的那样：

[Markdown 的] 语法非常小，仅对应于 HTML 标记的非常小的子集。 ... 对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身。

因此，您可以分别用<sub></sub> 或<sup></sup> 分隔文本。

但是，出于安全原因，许多实现都不允许使用原始 HTML。如果您正在使用这样的工具，那么该工具不提供对下标或上标的支持，除非它为该功能添加了一些新的非标准 Markdown 语法。在极少数情况下您的工具会（大多数不会），我建议您查看该工具的文档。

【讨论】：

【解决方案2】：

可以为 Strapi 编辑器添加 HTML 支持。目前 HTML 将不在 Strapi 中预览，但您可以按照以下步骤使其在您的应用中正确呈现。

你的基本步骤都和HTML-in-Markdown有关。您需要将其安装到您的项目中。

像这样将 React Markdown 安装到您的项目中：

npm install --save react-markdown

您可以配置的 repo 和其他选项位于 official repo。

您可以像这样将它添加到您的组件中：

A.将react-markdown 导入到您的文件中。 import ReactMarkdown from "react-markdown"

B.像这样对显示 html 的组件进行编码。

一个示例可能如下所示：（源选项需要返回一个字符串来解析）。

<ReactMarkdown  
   source={document.node.content}
/>

然后使用选项escapeHtml={false}。

<Reactmarkdown  
   source={document.node.content}
   escapeHtml={false}
 />

注意：您不希望为可从前端访问的任何输入转义 html，因为这会带来安全风险。

【讨论】：