防止所见即所得源代码编辑器更改所有网站
Prevent wysiwyg source code editor from changing all website
我在我的网站上使用所见即所得的编辑器（称为 "Jodit"）。它具有能够添加 html 代码的功能。如果我添加一些 html 样式代码以及“!important”，我可以修改整个网站的 CSS。
例如，转到https://xdsoft.net/jodit/play.html?currentTab=State
单击 "Change Mode" 图标“”
粘贴
<html>
<style>
* {
color:red !important;
}
</style>
</html>
整个网站的文字都变红了。
如何阻止所见即所得编辑器修改其文本区域之外的代码？
最直接的方法是使选择器更具体，使其仅针对所见即所得区域内的内容，例如
.jodit_workplace > * {
color: red !important;
}
如果所见即所得编辑器中的内容不受您的控制（例如，如果用户可以编辑和发布它）并且因此您不能为选择器添加前缀，您可以使用 iframe 或 shadow dom将其与页面的其余部分完全隔离。
我在我的网站上使用所见即所得的编辑器（称为 "Jodit"）。它具有能够添加 html 代码的功能。如果我添加一些 html 样式代码以及“!important”，我可以修改整个网站的 CSS。
例如，转到https://xdsoft.net/jodit/play.html?currentTab=State
单击 "Change Mode" 图标“”
粘贴
<html>
<style>
* {
color:red !important;
}
</style>
</html>
整个网站的文字都变红了。
如何阻止所见即所得编辑器修改其文本区域之外的代码？
最直接的方法是使选择器更具体，使其仅针对所见即所得区域内的内容，例如
.jodit_workplace > * {
color: red !important;
}
如果所见即所得编辑器中的内容不受您的控制（例如，如果用户可以编辑和发布它）并且因此您不能为选择器添加前缀，您可以使用 iframe 或 shadow dom将其与页面的其余部分完全隔离。