I’ve written a plugin which inserts photos/video from a popup lightbox into TinyMCE. This worked fine and formatted very well when aligned/wrapped. When it is inserted in HTML like below:
<img src="blah.png" />
But since then I added a feature to allow captioning, which uses a wrapper div such as:
<div class="ImageWrapper" width="x" height="x">
<img src="blah.png" />
Caption here
</div>
There are now a couple of problems I can’t fix.
First: How do I allow TinyMCE to format/align the div as it did with img?
Secondly: How do I prevent the user from selecting any of the contents of the div? Instead clicking should highlight the whole div so formatting and deleting works much more smoothly.
The problem is using a
<div>as a wrapper, which is apparently not naturally supported by TinyMCE. You have to go further than fidgeting with some css. TinyMCE being a popular editor, people have already tried and come up with a proper solution. Here’s someone who’s written a plugin: http://www.tinymce.com/forum/viewtopic.php?id=20319And there’s lots of more info to be found if you google for ‘tinymce div plugin’: http://www.google.com/#q=tinymce+div+plugin
I don’t know what would work best in your situation, so I guess you have to try some of the solutions (plpugins) offered.