I want to use CKEditor's inline editing mode to edit whole pages. This means that the editor area needs to be in an iframe (since it's not otherwise valid to have an <html> tag inside another). I've not seen any examples of how to do this, or whether it would even work. For example if ckeditor's toolbars are inside the iframe, will they be cropped to its boundaries? The examples all only show editing of the current page, not of iframed content.
All content would be same-source, or it could be entirely inlined using srcdoc attribute. Can CKeditor deal with that?
To further complicate things, these pages are edited as part of a form so I'll need to extract the entire page's content as part of the form submission. I think that's covered by the docs, but I'm not sure what complications the iframe would add.
Why?
Why?
inline editing is meant to be used for elements like divs.
If you want to edit a whole page then use the normal framed editor and you're ready to go. There's no need to make things more complex than they are.
I don't think there's
I don't think there's anything particularly unusual about this - it's a page allowing controlled edits of other pages. I don't want to allow editing of the entire page (i.e. in framed mode), only designated pieces within it, which is what inline mode provides. The page structure would look something like this:
I think inline editing is far more appropriate and less confusing than framed for this case. I want it to work exactly like the 'massive inline' editing example, but for a whole HTML doc, not just a few divs within the current page. The edited page will contain no scripts, have its own styles, may be HTML4 rather than HTML5.
As an alternative, is it
As an alternative, is it possible to use the contenteditable attribute to designate areas that are editable when in framed mode? It's a much less elegant solution, but it would be better than nothing.
Just to make this clearer,
Just to make this clearer, here's the app layout I'm thinking of:
The white area is my web app that manages pages or page templates. The pink area is a full HTML page selected from the list on the left. The pink area itself is not editable (as it would be in a normal CK frame editor), but the individual green areas are editable using ckeditor's inline mode. Current editors as found in wordpress etc typically would give you a separate frame editor for each of the green boxes, but that means you'd be editing in an abstract way, disconnected from the overall layout.
The alternative I mentioned would be to put the pink area in a frame editor, but only allow editing of the green areas somehow.
Can this be done?
[SOLVED]
I don't know why this isn't mentioned in the docs, but this can be done quite easily. CKeditor pays attention to the contenteditable attribute, and it can deal with nesting, so it's just a matter of turning it on and off at significant points, for example:
<html> <head> <title></title> </head> <body> <div contenteditable="false"> <h1 contenteditable="true">Editable heading<br> <div contenteditable="false">Not editable</div> <div contenteditable="true">Editable</div> </div> </body> </html>The h1 and the second div are editable, but the first div is not, and you can't add more content to the wrapper div. I found you can't set contenteditable="false" on the body; it just gets removed, so you need an overall wrapper div, and there doesn't sem to be any way of preventing adding content outside of that.