我有一个页面，我可以在其中使用模态编辑器定义一个 html 模板，然后将该模板放入一个 div 中(如预览)。 在这个文本区域内会有 Html/css(也许是 Js idk)。
我遇到的问题是放在模板中的 css 会影响整个页面。用户知道他在模板中创建的 div 和内容，但不知道网页内容本身。
我想限制这个 CSS 的范围。我考虑过将容器 div 切换到 iframe。但它看起来很复杂，因为我必须取回内容以在之后保存它。
这里有好的解决办法吗？
这可能是一个模板:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
border-style: none;
margin-left: 4%;
margin-right: 4%;
}
td{
line-height: 150%;
padding-top: 1%;
padding-bottom: 1%;
}
.solidTableFull{
//stuff
}
.solidTableMarge{
//stuff
}
span{
color: #0070c0;
}
</style>
</head>
<body style="zoom: 100%;">
//stuff
//stuff
//stuff
</body>
</html>
最佳答案
解决这种情况的一种方法是强制/指示用户在两个单独的文本区域中键入 html 和 css。
textarea one:过滤掉任何 html <style>标签 block (你可以使用 jQuery(textarea_content).find('style').remove(); )
文本区域二:过滤任何 html 标签或保持简单
作为第一步，在目标页面上呈现内容之前，您可以将 html 内容包含在一个 div 中并分配一个动态生成的类名
然后下一步是使用正则表达式将 css 定义提取为数组项，并在前面加上我们在步骤 1 中所做的动态生成的类名
如果难以定义正确的正则表达式，您可以使用字符串 split() 方法...例如:csstextarea_content.split('}')
这应该会给你一些想法......我希望
关于css - 限制页面内css的范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45502107/