Question

我的网站上有一个输入，允许用户编写HTML电子邮件模板。基本上我使用codemirror（只是我在网上找到并工作的那个）。在该模板中，用户也可以编写css。模板保存好了。

问题是当我尝试在用户的预览中显示模板时。一切都加载好（html和样式），但样式不仅适用于我的整个网站模板部分。

有没有办法从blob变量（html电子邮件模板）限制css的区域或某些内容？欢迎任何其他建议。

一个逻辑解决方案是使用不同的样式组成用户模板，但我想我不能限制用户输入样式

修改

我有这个textarea：

<textarea name="email_template" id="email_template"></textarea>

用户输入的示例：

.body div{
            /*@editable*/ color:#505050;
            /*@editable*/ font-family:Arial;
            /*@editable*/ font-size:14px;
            /*@editable*/ line-height:150%;
            /*@editable*/ text-align:left;
        }

<div class='bodyContent '> Hello Guys this is an email template </div>

然后将输入保存为数据库中的BLOB。

问题：当我用javascript显示div的输入时：

emailTemplate只是加载BlOB内容的另一个div

document.getElementById("emailTemplate").innerHTML = data[0]['email_template'];

如果我在body之外的课程emailTemplate也会受到影响。

Answer 1

使用<iframe>代替<div>来显示用户内容，因此它不适用于整个文档。

因为iframe中的文档是浏览器的不同网页，所以css声明或javascript全局函数之类的内容只能在<iframe>

内部使用

css仅适用于模板区域

1 个答案: