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

Question

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

---

以下是我的编辑器设置：

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

我得到的观点：

我想隐藏如图所示的虚线。我浏览了官网的文档，但还是找不到隐藏线条的配置。谁能指出我在这里错过了什么？

非常感谢。

Answer 1

The dashed borders on tables is to indicate where the hidden boundaries of the element is. This is really useful for resizing tables, columns and rows.

If you're really wanting to hide the borders, you can override the CSS during initialisation with the following configuration:

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

This will hide the dashed table border and table-cell borders.

More details on how to customise the appearance of the content within the editor is available on Tiny's Documentation website.

Additionally, I have created a Tiny fiddle to demonstrate.