Question

我有一个页面，我可以使用模态编辑器定义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>

Answer 1

解决这种情况的一种方法是强制/指示用户在两个单独的textarea中键入html和css。

textarea one：过滤掉任何html <style>标记块（可以使用jQuery（textarea_content）.find（'style'）。remove（）;）

textarea two：过滤任何html标签或保持简单

作为第一步，在目标页面上呈现内容之前，您可以使用div包含html内容并分配动态生成的类名

然后下一步是使用regexp将css定义提取为数组项并添加我们在step1中执行的动态生成的类名

如果难以定义正确的正则表达式，则可以使用string split（）方法...例如：csstextarea_content.split('}')

这应该给你一些想法......我希望

Answer 2

您可以使容器中的所有CSS都依赖于容器类。例如，您需要为div创建样式，而不是使用#container div的样式。

这只会影响容器div中的div，而不会影响整个页面。

Answer 3

简单的，也许唯一的选择是给你的预览div提供一些ID（如果你有一次显示更多实例的类名），然后使用相同的选择器为每个css规则添加前缀

＆＃13;

strong { color: #FF0000; }
#preview strong { color: #0000FF; }

＆＃13;

<div>
  No preview <strong>content</strong>
  <div id="preview">
    <strong>Preview</strong> content.
  </div>
 </div>

＆＃13;

考虑到计数，一些父css也可以应用于您的预览。为避免这种情况，您可以使用:not(#preview)选择器

限制页面内css的范围

3 个答案: