防止 Summernote html 所见即所得编辑器页面被内容 CSS 更改

Posted 2023-03-22

【中文标题】防止 Summernote html 所见即所得编辑器页面被内容 CSS 更改

【英文标题】：Prevent Summernote html wysiwyg editor page being changed by content CSS

【发布时间】：2019-04-09 18:36:38

【问题描述】：

我们正在使用 Summernote 所见即所得编辑器来查看/预览 html 内容，其中一些内容包含外部样式表引用。其中一些 CSS 不仅会更改 Summernote 本身，还会更改 Summernote 所在的父页面。

为了演示，只需转到summernote.org 页面并将此css 引用拖放到在线编辑器中（首先选择“ >”进行代码查看）。由于编辑器中的 css，您应该会看到工具栏（以及某些页面上的内容）居中以及其他不需要的更改：-

<link href="https://owa.kccd.edu/owa/14.3.248.2/themes/resources/logon.css" rel="stylesheet" type="text/css" />

我们尝试将 Summernote 放在 iframe 标记中，但这无济于事，所以有没有办法隔离 summernote 从而防止这种 css “泄漏”到周围的页面？

作为参考，我们使用的是 asp.net Razor 页面。

谢谢。 詹姆斯

【参考方案1】：

经过大量研究，似乎因为 Summernote 不驻留在它自己的 iFrame 中，因此包含在其中的任何 CSS 都会自然地传播到周围的页面。其他人对此发表了评论，尽管我手头没有该信息来源。

我们别无选择，只能更改为 ckeditor，它非常适合我们的需求。