Moving CM to Iframe and back

I have a quite complicated webapp … where I recently startet to integrate CM for better editing. And I really like it!
(before I just used plain textarea)

Now sometimes the textinput will be in the main document, but sometimes from an iframe embedded (but connected) to the mainapp.

Out of performance and maintainance reasons, I would like to have just one instance of cm and reuse it.

On the maindocument cm now works.
But when I simply append the cm-editorwrapper element into the iframe, the result is very odd behavior.
(refresh() helps only for the moment, but gets confused after the next input)

Now am I missing something, like a method for this case, or is my use-case simply not intented and I should use a second instance for the iframe?

Also, how is the state of CM 6? Is it quite stable now?
Because since I just started integrating cm into my project and even though it works, I still have to tweak quite some things anyway, I could also just use the new version?

Editors created in an iframe seem to work. Editors moved there indeed don’t appear to, though I don’t see, right away, why not.

Version 6 isn’t usable yet, so I wouldn’t hold out for that if you have an immediate need for an editor.

Thanks for the quick answer.

And well, too bad, but if you find out what’s wrong, I would be glad.

Otherwise I can probably live with a workaround, that I put my cm instance over the iframe (but that can get messy in my codebase).

Sadly the problem exist (unsurprisingly) similar with a new window. So if I create a new window and then move CM there. And for this scenario I do not have a easy workaround, so is there any chance, that this issue gets fixed in the near future?

If not, what would be the cheapest way, to create a second instance of cm? (there would and should be always only one editor active, so no need for 2 states for example.)

Just create a new instance. You should be able to reuse editor.doc by passing it as value option to the new editor, if you want to.


Sadly creating a complete new instance of cm in a new window(from the root window), has the same effect for me, as reusing cm. It does not work at all.

I can’t really get a jsfiddle to work, to show it, probably due to same-origin etc… I did upload a sample, what I mean

(just those 4 files in a folder on a localhost)
cm.html (353 Bytes) cmt2.html (23 Bytes) codemirror.css (8.5 KB) codemirror.js (388.2 KB)

Only thing I could think of, I could do, is completely integrating and loading cm into every new window. Will try that later, but it is a bad solution for performance. As my extra windows are just dummy windows controlled fully by the main page, which are supposed to open quickly, without loading anything - they get filled with content from the main page (and share the code).

Ok. I got it. Kind of obvious actually.
The css file for codemirror is missing in the new window/iframe.
So it is easy to share the code, but the other window needs the stylesheet

So just adding
<link rel="stylesheet" href="codemirror.css">
to the new window (cmt2.hml in my example) fixed it.
And there is a small overhead for loading, but with browser caching it is very small. (checked with chrome dev tools, performance tab)

Maybe it is also possible to reuse the css from the main document, but I won’t bother for now.

p.s. going for a walk in the rising sun does help sometimes …