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

Question

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

以下是我的编辑器设置：

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

我得到的视图：

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

非常感谢。

Answer 1

tables 上的虚线边框表示元素的隐藏边界所在的位置。这对于调整 table、列和行的大小非常有用。

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

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

这将隐藏虚线 table 边框和 table-cell 边框。

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

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

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

tinymce-react - how to hide dotted line in read-only mode

html

reactjs

tinymce

tinymce-5