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