I’m trying to add a default button that takes an image and surrounds it with a div that floats left, and has a caption. Works great in Firefox, but in Safari I’m getting a weird error (see attached pic).
Here’s my new button code:
teButtons.push(new TextileEditorButton('ed_leftpic', 'image_left.png',
' <div class="picleft" style="width:0px;">\n ', ' \n <p class="piccredit">CREDIT</p>\n
<p class="picdesc">DESCRIPTION</p>\n </div>', '', 'Float Picture Left'));
If you have an image in the body area, you select it and click the button, which results in the following:
<div class="picleft" style="width:0px;">
<img src="{filedir_1}pic.jpg" width="275" height="78" />
<p class="piccredit">CREDIT</p>
<p class="picdesc">DESCRIPTION</p>
</div>
All the user has to do then is set the width of the div to be the same as the width of the picture, and fill out the credit and description (or delete them, as they’re optional).
It’s a slick solution for the users and like I said, this works great in FF. Compare the two attached pics to see how it’s supposed to look, and how Safari is rendering it. For these more complex buttons, is there some way I should be escaping the markup so that Safari renders it correctly in the browser? I’ve tried a few different things, but if someone knows off the top of their head that would be great as I couldn’t get this error to go away.
Click thumbnail to see full-size image
