CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Onix
Onix

Reputation: 2179

css to apply only in template area

I have an input in my website which allows the user to write an html email template. Basically I use codemirror (just the one I found online and working). In that template the user can write css too. The template is saved okay.

The issue is when I try to display the template in a preview for the user. Everything loads okay (html and styles) but the styles apply to my whole website not only in the template part.

Is there a way to limit the area or something of the css from the blob variable(html email template) ? Any other suggestion is welcome.

one logical solution is to have different styles form the ones of the users template, but I guess I cant limit the users input styles

EDIT

I have this textarea:

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

an example of user input: 

.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>

then the input is saved as a BLOB in a database.

The problem: When the I display the input to a div with javascript:

emailTemplate is just another div to load the content of the BlOB

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

if I have a class body outside of that emailTemplate gets affected too.

Upvotes: 1

Views: 240

Answers (1)

Pablo Recalde
Pablo Recalde

Reputation: 3571

Use an <iframe> instead of a <div>to display the user content, so it wont apply to the whole document.

Because the document in the iframe is a different webpage for the browser, anything like css declarations, or javascript global functions will work only inside the <iframe>

Upvotes: 2

Related Questions