I'm building a markdown editor using node-webkit (native applications using HTML/JavaScript), marked (a js markdown compiler) and CodeMirror (code editor). So I'm basically building a markdown editor using HTML and JavaScript (+ jQuery) that runs as a native application.
One of it's features is that it has a live preview of the compiled HTML. This live preview is inside an iframe and updates every time the user changes any content in the CodeMirror editor. The problem is that when the preview updates the whole document inside the iframe gets replaced. So it's basically reloading a whole webpage every time you press a key. This is not very efficient, and makes the whole application run slow. It's also a problem when you add any embedded media like a Youtube video to your document, because it's going to reload that video every time the preview updates.
I tried to solve the problem by adding a timer so the preview won't update faster than once every 250 milliseconds. This solves the slowness problem, but embedded media will still reload on every preview update.
I tried some other live preview HTML/markdown editors and most of the used the same method for a live preview as me, except StackEdit (and probably some other ones but StackEdit is a good example). I noticed that in StackEdit when you embed a youtube video somewhere in the document, and then edit some text somewhere else in the document the Youtube video doesn't reload. That's exactly what I need: only update content in the preview that has changed. How can I get my live preview to work like that?
Note: This is how the preview currently gets updated:
var HTML = marked(CodeMirror.getValue()); $('iframe').contents().find('.content').html(HTML);(This happens every time with an interval of 250 milliseconds when the content of the codemirror editor changes.)
