Question

I’ve got a video upload for tinymce, which inserts some code into the editor like so:

var content2 = "<div class='playvideo' id='<?php echo $randomnumber;?>'>
<img class='posterimage' src='<?php echo $new_image_path; ?>'>
<a id='<?php echo $new_file; ?>' class='videoplaceholder'></a>
</div></div>";


parent.tinyMCE.execCommand('mceInsertContent', false,content2);

this works fine, and outputs this :

<p><div id="581827" class="playvideo">
<img class="posterimage" src="/uploads/videos/images/1097VID.jpg" alt="" />
<a class="videoplaceholder" id="1097VID.mp4"></a>
</div></p>

But after this content is inserted, ofcourse I would like to continue writing text. But when I do that, the text gets placed inside my inserted content after the img tag.
like so:

<p><div id="581827" class="playvideo">
<img class="posterimage" src="/uploads/videos/images/1097VID.jpg" alt="" />text i try to write goes here for some reason
<a class="videoplaceholder" id="1097VID.mp4"></a>
</div></p>

Fiddle example

When enter is clicked for new line, it creates a second div with the same class as what I inserted. It’s a weird behavior.. I read that a div is illegal inside a paragraph, but it doesnt work with span either.

Does anyone have any pointers? Any help is greatly appreciated.

Answer 1

The problem of the text getting inserted after the img can be fixed by putting an   as the link text i.e. instead of <a id='<?php echo $new_file; ?>' class='videoplaceholder'></a> you can use <a id='<?php echo $new_file; ?>' class='videoplaceholder'>&nbsp;</a>. I am not sure about the class though, may be there is a way to prevent TinyMCE from adding the class by default.