CODEWITHSUNDEEP
tinymcetinymce-pluginstinymce-3
Jithendra Kumar
Jithendra Kumar

Reputation: 1

Tinymce 3 Custom Embeded Video Code Not Working

I have started with tinyMCE 3. I was trying to copy paste below code into HTML Source Editor like

<video id="testplayer" data-account="4338955589001" 
       data-player="Bkh63tBcx" data-embed="default" 
       class="video-js" controls="" 
       data-video-id="5347595845001" 
       style="width: 100%; height: 100%; 
       position: absolute; top: 0px; bottom: 0px; right: 0px; 
       left: 0px;"></video>

But When I click on updated it appears on Editor but again if I click on HTML Source editor it clear above code . please let me know what am I missing?

go through : http://archive.tinymce.com/tryit/3_x/full.php and copy pasted above code but after re -open HTML Source Editor it clear .

Upvotes: 0

Views: 2124

Answers (1)

Vitor Costa
Vitor Costa

Reputation: 114

This was my answer before details. See below to see the actual help for this question:

---- BEFORE-------

Please have a look in the documentation.

You have to add the media plugin to the TinyMCE settings so it doesn't rip of the <video> tag.

That plugin also adds a menu option in Insert > Media, which you also can use to add your video.-

------EDIT--------

Using your TinyMCE fiddle, and also the full featured TinyMCE 3, I was able to put your video there. It seems that TinyMCE 3 has some issues with this, to which TinyMCE 4 works fine.

To add your video, instead of using the HTML source feature, use the Media feature. If you click on the video icon on the menu, a popup will appear with options for you to add a video. One of those options is for you to insert directly your source code. If you do it this way, the video won't get ripped off when you view the HTML source. I'm not sure what TinyMCE is doing differently, but adding it through the HTML source it gets cleaned up, while using the Media Source it won't.

------EDIT 2--------

Further investigation, regarding why clicking on "HTML source" twice after adding the video through the "Source" tab of the Media button, I went to check the difference between the HTML on the object that appeared in the rich text editor.

The first time (right after adding the tag), the HTML of the object that appeared in the rich text editor had the following attribute:

data-mce-json="{'video':{'attrs':{'id':'testplayer','data-account':'4338955589001','data-player':'Bkh63tBcx','data-embed':'default','class':'video-js','data-video-id':'5347595845001','style':'width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;','preload':'none','controls':'controls','src':null,'poster':null},'sources':[{'src':''}]},'params':{'src':null},'type':'video','class':'mceItemMedia mceItemVideo','id':'testplayer','width':'320','height':'240'}"

Opening the the HTML source and clicking in "Update", and checking again the HTML source of the object, the same attribute was:

data-mce-json="{'video':{'attrs':{'id':'testplayer','width':'320','height':'240','style':'width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;','data-account':'4338955589001','data-player':'Bkh63tBcx','data-embed':'default','class':'video-js','data-video-id':'5347595845001','preload':'none','controls':'controls','src':''},'sources':[]},'params':{},'hspace':null,'vspace':null,'align':null,'bgcolor':null}"

As you can see, there are several differences between them. The main difference that is causing the <video> tag to be ripped off after the second time is the fact that the 'sources' is [] instead of [{'src':''}] like it is on the first. If you change this manually in the HTML source of your browser, you'll see that it works.

Now, to fix this, I'm seeing two possible solutions:

  1. Enter a src attribute, other than src="". When it has a non-empty src, it seems to work. However, I don't know if this will break you <video> tag, it depends on what your goal is. So, this might or might not be feasible for you, but it's worth the mention.

  2. Use the protect setting on TinyMCE. With this, you can specify, through a regular expression, what should be protected from TinyMCE cleanup functions. This will make the video invisible in the Editing mode of TinyMCE, but will keep it in the HTML source. For your case, this setting would be like this:

    protect: [
    /\<\/?video[^>]*\>/g
]

You just need to measure both possible solutions and see if any of them is good for your case.

Upvotes: 0

Related Questions