One of the templates that we're hoping to support includes an embedded etherpad (via iframe) and a Google Hangout video (also via iframe). To see an example of this type of page, check out the Curriculum Workshop page on the teach site.
I've defined a custom template for TinyMCE that contains a div with a special classname
<div class='etherpad' />
It's available from the "templates" menu from the editor UI (the box next to the Undo & Redo arrows)
That's what gets injected into the Editor window, and the classname gives it the special styling with and etherpad logo (via a stylesheet that applies to the Editor only)
When the 'output' page is rendered, it looks for a div with that classname, then replaces it with an <iframe /> and uses the text in the div as the src attribute.
Benefits
I think this is a pretty good approach because we can use a single, editable div (or other component) during editing to represent an otherwise more complicated piece of UI. Having just one editable element makes it a lot less likely for the author to make a mistake during editing by accidentally deleting some markup that makes the component works - it's either there, or it's not.
We can apply this same approach to the Google Hangouts use case, which is also just an iframe with a configurable URL.
Drawbacks
The content in the editor is different than how it looks in the finished page. The saved markup from the editor also isn't a one-to-one representation of the final content, and if we use some other way to display it, our special .etherpad div won't be replaced with an iframe.
I don't think these are huge concerns, but good to be aware of them. We could potentially convert the div into the iframe markup at the time the project is saved, so that in the database we store the final html. This would add the increased complexity of 'decoding' the saved markup back into our special editable .etherpad div.
One of the templates that we're hoping to support includes an embedded etherpad (via iframe) and a Google Hangout video (also via iframe). To see an example of this type of page, check out the Curriculum Workshop page on the teach site.
I took a crack at it here for the Etherpad use-case... http://flukeout.github.io/master-template/template-types/editor-etherpad.html
Here's how it works
<div class='etherpad' /><iframe />and uses the text in the div as thesrcattribute.Benefits I think this is a pretty good approach because we can use a single, editable div (or other component) during editing to represent an otherwise more complicated piece of UI. Having just one editable element makes it a lot less likely for the author to make a mistake during editing by accidentally deleting some markup that makes the component works - it's either there, or it's not.
We can apply this same approach to the Google Hangouts use case, which is also just an iframe with a configurable URL.
Drawbacks The content in the editor is different than how it looks in the finished page. The saved markup from the editor also isn't a one-to-one representation of the final content, and if we use some other way to display it, our special
.etherpaddiv won't be replaced with aniframe.I don't think these are huge concerns, but good to be aware of them. We could potentially convert the div into the iframe markup at the time the project is saved, so that in the database we store the final html. This would add the increased complexity of 'decoding' the saved markup back into our special editable
.etherpaddiv.cc @gvn @simonwex