I've upgraded ckeditor to version 3.6.1 in hopes of using HTML5 in the editor and it is not working properly.
I have a drop down that selects a video, then a hidden div contains all the <video></video> code. I would then click a button to add the video into ckeditor at the current cursor's position. I can't really use a custom ckeditor control here as any number of videos need to automatically be added as fallbacks, as well as a flash version in the video tag.
I have to get this working correctly as soon as possible, can someone help?
Here is the button that is clicked:
<input type="button" id="btnInsertVid" value="Do It" />
Here is the jquery function:
Here is the hidden div containing the html5 video code, I've kept is simple, my actual code contains a flash fall back and up to 5 different versions of a video for compatibility.
<div id="hiddenVideo" style="display:none;"><video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag. </video></div>
I place the cursor within a simple 1 row, 1 column table and then click a button to call the js function to insert the html and ckeditor duplicates the source tag all together and throws it at the end of the editor, as well as auto-closes and adds </source> tags. It appears to happen only when the video tag is wrapped within any other tag, even a <p></p>
As I change back and forth clicking the Source button, the duplicate source tag happens again, and then it tries to close that tag, so I end up with 100's of source tags.
Dragging and dropping the element once it is in the editor, is either not possible at all with some browsers or in others it separates the video tag and code into bits and pieces, either removing the source tags all together or breaking the video and source tags up into different portions within the code. The users have to be able to drag and drop the element into various positions.
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;"> <tbody> <tr> <td> <video controls="controls" height="240" width="320"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </source></source></video> </td> </tr> </tbody> </table> <p> <source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4"> <p> </p> </source></source></p>
Why is this happening? Can I edit something in the dtd.js or turn off some option to fix it?