css僅適用於模板區域

我在我的網站上有一個輸入，它允許用戶編寫一個html電子郵件模板。基本上我使用codemirror（就像我在網上找到的那個）。在該模板中，用戶也可以編寫css。模板保存好。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只是另一個DIV如果我有一個加載BLOB

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

的內容body之外的那個emailTemplate也受到影響。

來源

2017-02-10 Onix

裏面你爲什麼不能添加ID或類模板和確保css規則是特定於該類/ id的？ –

使用類或ID來標識您的模板區域，並將所有特定的CSS放置在此類或ID下。像'.template-area label {color：red; }'表示模板區域內的所有標籤。 –

將模板與樣式和html一起保存爲blob形式的用戶。我無法控制輸入。類和ID可以是用戶喜歡的任何東西 – Onix

使用而不是<div>來顯示用戶內容，因此它不適用於整個文檔。

因爲在iframe的文件是不同的網頁的瀏覽器，如CSS聲明任何東西，或JavaScript全局函數只會工作的

來源

2017-02-10 09:56:52 r1verside

是的，非常感謝你 – Onix

css僅適用於模板區域

回答

相關問題