tinymce-react - 如何在只读模式下隐藏虚线答案

【问题标题】：tinymce-react - how to hide dotted line in read-only modetinymce-react - 如何在只读模式下隐藏虚线
【发布时间】：2020-08-18 07:21:42
【问题描述】：

我有一个关于tinymce-react 的问题。我在我的 react 项目中使用 tinymce 来预览 html 内容。

以下是我的编辑器设置：

<Editor
 value={templateDetails.content}
 init={{
   toolbar: false,
   menubar: false,
   height: 400,
   setup(editor) {
     editor.setMode('readonly');
   },
 }}
/>

我得到的观点：

我想隐藏如图所示的虚线。我在官网上翻了documentation，但还是找不到隐藏线的配置。谁能指出我在这里遗漏了什么？

非常感谢。

【问题讨论】：

您好，如果您想预览 HTML 内容，TinyMCE 可能不是最好的解决方案。它是 HTML，因此您可以将内容放在单独的 div 元素或 iframe 中以预览内容。如果您想编辑 HTML 内容，那么 TinyMCE 是您的最佳选择。您能否进一步详细说明您对 HTML 内容的意图？
嗨@DallasClark，我正在为我的项目开发电子邮件模板编辑功能。有一个部分，用户可以从他们之前创建的列表中预览电子邮件模板。因此，我决定使用 TinyMCE 来显示电子邮件内容。
如果您想显示电子邮件模板的预览，我建议您使用 iframe 元素。否则，您在不需要编辑时会引入编辑器，从而产生不必要的开销。此外，正如您所发现的，该编辑器不是为预览内容而设计的。
你是对的。仅仅为了预览内容而使用编辑器没有任何好处。我会考虑用 iframe 元素替换它。非常感谢您的建议。

标签： html reactjs tinymce tinymce-5

【解决方案1】：

表格上的虚线边框表示元素的隐藏边界在哪里。这对于调整表、列和行的大小非常有用。

如果您真的想隐藏边框，可以在初始化期间使用以下配置覆盖 CSS：

content_style: '.mce-item-table, .mce-item-table td {border: none;}'

这将隐藏虚线表格边框和表格单元格边框。

有关如何在编辑器中自定义内容外观的更多详细信息，请访问Tiny's Documentation website。

另外，我创建了一个Tiny fiddle to demonstrate。

【讨论】：