Can I display an inner div with an independent stylesheet?

My application lets users edit documents. The editor widget, unsurprisingly, represents user documents as HTML.

I need to redisplay the documents outside the editor, but inside my site's layout. Documents need to appear in the exact same style they are presented in the editor, unaffected by my site's stylesheet. I could use the editor in read only mode, with all its buttons hidden, but I still will have scrollbar and border s开发者_开发问答tyle issues to resolve.

I have identified the CSS file that the editor uses. How can I effectively configure a div element (the one that will contain the document) to (1) disregard all current styling, and (2) load a css file to apply to its content?

You have two options:

1.) Reset all styles on the div containing your document, and make sure your document's styles are prioritized over the reset. This could get messy.

2.) Use an iframe and load the document and styles inside the iframe.

<iframe src=".../documents/myDocument.html"></iframe>

Where "myDocument.html" is an html document containing the document and styles (treat the document html page as any other html page, and make sure it has proper head and body tags, etc.

Other options:

1.) Open the document html page inside another window.

<a href=".../document/myDocument.html" target="_blank" >Open Document</a>

2.) Render the document as a pdf, and load it into the page using a pdf viewer. (you would want to keep a backup of the original document, as the conversion back would be terrible, I presume).

Yes and no. If you want to use a div, you will want to use a stylesheet with styles defined to "reset" the css for that div. That would basically undo your site's styles, and then any new style selectors should be limited to within that div itself.

Otherwise, I would suggest using something like an iframe where you can render a truly independent document.