如何使用 React-TinyMCE 将 CSS 类添加到我的可编辑元素答案

【问题标题】：How can I add CSS class to my editable element using React-TinyMCE如何使用 React-TinyMCE 将 CSS 类添加到我的可编辑元素
【发布时间】：2020-08-16 18:13:45
【问题描述】：

我想用预定义的 CSS 为我的可编辑内容框设置样式，方法是添加一个类名，但我没有看到任何能让我这样做的属性。有一个属性body_class，但它似乎不适用于react-tinymce

这是我的代码

 <Editor
       init={{toolbar: false}}
       apiKey="xxxxx"
       inline={true}
       value="Design DIY">
  </Editor>

【问题讨论】：

标签： react-tinymce javascript css reactjs tinymce tinymce-5

【解决方案1】：

如果您想将 CSS 传递给编辑器，以便在编辑时使用它来设置内容的样式，您需要使用 content_css 或 content_style 配置选项。

https://www.tiny.cloud/docs/configure/content-appearance/#content_css https://www.tiny.cloud/docs/configure/content-appearance/#content_style

content_css 可能更容易，因为它允许您将 CSS 放在外部文件中并通过 URL 引用它。

【讨论】：

这些是 TinyMCE 通常的有效选项。我不想使用内联样式，因为我一直想将它保留一个我可以单独控制的文件，所以content_style 可能是没有选择的。使用反应，我已经将样式导入为import styles from "./css/styles.css"。您如何建议我可以添加类以便导入 css，或者使用 content_css 导入它才有意义？ @迈克尔
另外，我目前正在将className 添加到父元素并将tagName 提供给编辑器。在 CSS 中，我通过父类定位编辑器。这似乎不是正确的方法。它只是一种解决方法，我相信一定有办法，但我似乎不明白。
TinyMCE 作为 iframe 添加到页面中 - 您不能使用嵌入到主页面包中的 CSS，因此这些不同的设置。虽然我理解您希望重用捆绑的 CSS 的愿望，但在这种情况下您确实不能这样做。
我想，我会坚持使用解决方法。效果很好。谢谢。

【解决方案2】：

在 React 中，你可以像传递 props 一样传递你的风格。 Here's a link 用于文档。但基本上，您只需编写常规 css，除了两个字的属性。那些必须用驼峰写法。链接给出了background-color的例子，必须写成backgroundColor，因为它是一个JSX。

【讨论】：

是的，但我说的是把属性传递给名为 TinyMCE 的插件，标准方法不适合它。