整个网站全局应用了 bootstrap 的基础样式。
在页面中的一个div里要嵌入一个由富文本编辑器生成的一段内容,这段内容不希望受到 bootstrap 的基础样式的影响,但是页面内除了这个div以外的其他部分需要应用bootstrap 的基础样式。
请问有办法实现这个需求吗?
整个网站全局应用了 bootstrap 的基础样式。
在页面中的一个div里要嵌入一个由富文本编辑器生成的一段内容,这段内容不希望受到 bootstrap 的基础样式的影响,但是页面内除了这个div以外的其他部分需要应用bootstrap 的基础样式。
请问有办法实现这个需求吗?
这个问题其实很早以前就有真正的解决方案了:Shadow DOM
<style>
div {
padding: 10px;
background: red;
font-size: 25px;
text-transform: uppercase;
color: white;
}
</style>
<div>
<p>I'm outside the element (big/white)</p>
<my-element>Light DOM content is also affected.</my-element>
<p>I'm outside the element (big/white)</p>
</div>
<script>
const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
background: white;
}
</style>
<p>my-element: all CSS properties are reset to their
initial value using <code>all: initial</code>.</p>
<slot></slot>
`;
</script>
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
分两种情况:
情况1,编辑器受影响的样式少,那重写就可以了,工作量也不大。
情况2,编辑器受影响的样式多,那可以把编辑器写在单独的页面里,用iframe引进来。
我觉得受影响的样式应该不多,情况1可以了。