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

【问题标题】：Prevent Summernote html wysiwyg editor page being changed by content CSS防止 Summernote html 所见即所得编辑器页面被内容 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 页面。

谢谢。詹姆斯

【问题讨论】：

标签： javascript html css razor summernote

【解决方案1】：

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

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

【讨论】：