TinyMCE with non-rectangular boundary

Question

I'd like to use TinyMCE to WYSIWYG support inline editing of a page's body. The tricky thing is that my page body isn't necessarily rectangular or in the shape of a normal textarea.

Imagine a news article like this one. Could I make the entire story body an instance of TinyMCE so that my editor wraps above and below the lead image and the "don't miss" sections?

In other words, I'd to use TinyMCE (or other editor) to supports wrapping around existing page elements like images, navigation, etc. Since TinyMCE doesn't actually use a textarea for formatting, this should be possible, right?

Answer 1

If you know the dimensions of the image flowing in, you could use a bit of TinyMCE config to create a placeholder inside the TinyMCE editor to make it's content flow around, and at the same time lay the image above the editor window.

Like:

tinyMCE.init({
    ...
    oninit :  function () {
      /* create '<div style="float:left;width:100px;height:100px"/>'
         and insert it in front of the actual TinyMCE data.
       */
    },
    save_callback : function () {
      /* remove the div created with oninit */
    }
});

Then position the article image to flow above the editor area.

All in all not trivial, but neither is your problem :-)

Cheers,