HTML5 / Add support for source and track elements

[Russ Tennant]

Currently if you use source and track elements they are converted from void elements to non void elements, duplicated, nested, and other interesting things :)

Starting in source view:

<video controls autoplay>
 <source src="video.mp4" type="video/mp4" >
 <source src="video.ogv" type="video/ogg"
         onerror="fallback(parentNode)">
</video>

Toggle source view on and off:

<video autoplay="" controls="">
 <source src="video.mp4" type="video/mp4"> 
 <source onerror="fallback(parentNode)" src="video.ogv" type="video/ogg"> 
 </source></source>
</video>

Also, the video or source end tags are misplaced if there is content that follows. Follow

Before:

<video controls autoplay>
 <source src="video.mp4" type="video/mp4" >
 <source src="video.ogv" type="video/ogg"
         onerror="fallback(parentNode)">
</video>
<div>Video Sibling</div>

After:

<video autoplay="" controls="">
  <source src="video.mp4" type="video/mp4"> 
  <source onerror="fallback(parentNode)" src="video.ogv" type="video/ogg"> 
  </source></source>
</video>
<p>
<source src="video.mp4" type="video/mp4">
<source onerror="fallback(parentNode)" src="video.ogv" type="video/ogg">
 <p>
 <source src="video.mp4" type="video/mp4"> 
 <source onerror="fallback(parentNode)" src="video.ogv" type="video/ogg">
 </source></source>
 </p>
 <source src="video.mp4" type="video/mp4">
 <source onerror="fallback(parentNode)" src="video.ogv" type="video/ogg">
  <div>Video Sibling</div>
 <p>&nbsp;</p>
</source></source></source></source></p>

[Alfonso Martínez de Lizarrondo]

Trying to use a <video> element directly will give you problems. You'll need to use a placeholder like I did in this plugin: ​http://alfonsoml.blogspot.com/2011/01/html5-video-plugin-for-ckeditor.html

[Jakub Ś]

Since video tag is one of standard tags in HTML5 we should definitely have plugin for it. Most likely similar to flash.

[Carsten Schmitz]

Curently

  <video>
    <source />
    <track />
  </video>

is converted to:

  <video>
    <source>
      <track>
      </track>
    </source>
  </video>

which is definitely wrong. Is there a workaround for this somehow? Can I tell CKEditor somehow to leave the tags alone?

[Russ Tennant]

We are currently running 3.6.1 and it looks like we modified dtd.js to avoid mangling. Reviewing the diff I have it looks like we had made changes to support the tags: meta (microdata), source, track, command, and keygen. This was done in 2011. Not sure what would need to be done in the current version.

Index: _source/core/dtd.js
===================================================================
RCS file: /home/cvsroot/thirdparty/lib/javascript/fredck-fckeditor/src/web/docroot/FCKeditor/_source/core/dtd.js,v
retrieving revision 1.1.2.5
retrieving revision 1.6
diff -u -8 -r1.1.2.5 -r1.6
--- _source/core/dtd.js	23 Jun 2011 17:01:25 -0000	1.1.2.5
+++ _source/core/dtd.js	24 Jun 2011 17:31:19 -0000	1.6
@@ -32,18 +32,18 @@
 CKEDITOR.dtd = (function()
 {
 	var X = CKEDITOR.tools.extend,
 
 		A = {isindex:1,fieldset:1},
 		B = {input:1,button:1,select:1,textarea:1,label:1},
 		C = X({a:1},B),
 		D = X({iframe:1},C),
-		E = {hr:1,ul:1,menu:1,div:1,section:1,header:1,footer:1,nav:1,article:1,aside:1,figure:1,dialog:1,hgroup:1,mark:1,time:1,meter:1,command:1,keygen:1,output:1,progress:1,audio:1,video:1,details:1,datagrid:1,datalist:1,blockquote:1,noscript:1,table:1,center:1,address:1,dir:1,pre:1,h5:1,dl:1,h4:1,noframes:1,h6:1,ol:1,h1:1,h3:1,h2:1},
-		F = {ins:1,del:1,script:1,style:1},
+		E = {hr:1,ul:1,menu:1,div:1,section:1,header:1,footer:1,nav:1,article:1,aside:1,figure:1,dialog:1,hgroup:1,mark:1,time:1,meter:1,command:1,keygen:1,output:1,progress:1,audio:1,video:1,details:1,datagrid:1,datalist:1,blockquote:1,noscript:1,table:1,center:1,address:1,dir:1,pre:1,h5:1,dl:1,h4:1,noframes:1,h6:1,ol:1,h1:1,h3:1,h2:1,meta:1},
+		F = {ins:1,del:1,script:1,style:1,meta:1},
 		G = X({b:1,acronym:1,bdo:1,'var':1,'#':1,abbr:1,code:1,br:1,i:1,cite:1,kbd:1,u:1,strike:1,s:1,tt:1,strong:1,q:1,samp:1,em:1,dfn:1,span:1,wbr:1},F),
 		H = X({sub:1,img:1,object:1,sup:1,basefont:1,map:1,applet:1,font:1,big:1,small:1,mark:1},G),
 		I = X({p:1},H),
 		J = X({iframe:1},H,B),
 		K = {img:1,noscript:1,br:1,kbd:1,center:1,button:1,basefont:1,h5:1,h4:1,samp:1,h6:1,ol:1,h1:1,h3:1,h2:1,form:1,font:1,'#':1,select:1,menu:1,ins:1,abbr:1,label:1,code:1,table:1,script:1,cite:1,input:1,iframe:1,strong:1,textarea:1,noframes:1,big:1,small:1,span:1,hr:1,sub:1,bdo:1,'var':1,div:1,section:1,header:1,footer:1,nav:1,article:1,aside:1,figure:1,dialog:1,hgroup:1,mark:1,time:1,meter:1,menu:1,command:1,keygen:1,output:1,progress:1,audio:1,video:1,details:1,datagrid:1,datalist:1,object:1,sup:1,strike:1,dir:1,map:1,dl:1,applet:1,del:1,isindex:1,fieldset:1,ul:1,b:1,acronym:1,a:1,blockquote:1,i:1,u:1,s:1,tt:1,address:1,q:1,pre:1,p:1,em:1,dfn:1},
 
 		L = X({a:1},J),
 		M = {tr:1},
@@ -52,17 +52,17 @@
 		P = X({form:1},A,D,E,I),
 		Q = {li:1},
 		R = {style:1,script:1},
 		S = {base:1,link:1,meta:1,title:1},
 		T = X(S,R),
 		U = {head:1,body:1},
 		V = {html:1};
 
-	var block = {address:1,blockquote:1,center:1,dir:1,div:1,section:1,header:1,footer:1,nav:1,article:1,aside:1,figure:1,dialog:1,hgroup:1,time:1,meter:1,menu:1,command:1,keygen:1,output:1,progress:1,audio:1,video:1,details:1,datagrid:1,datalist:1,dl:1,fieldset:1,form:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,hr:1,isindex:1,noframes:1,ol:1,p:1,pre:1,table:1,ul:1};
+	var block = {address:1,blockquote:1,center:1,dir:1,div:1,section:1,header:1,footer:1,nav:1,article:1,aside:1,figure:1,dialog:1,hgroup:1,time:1,meter:1,menu:1,command:1,keygen:1,output:1,progress:1,audio:1,video:1,details:1,datagrid:1,datalist:1,dl:1,fieldset:1,form:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,hr:1,isindex:1,noframes:1,ol:1,p:1,pre:1,table:1,ul:1,meta:1};
 
 	return /** @lends CKEDITOR.dtd */ {
 
 		// The "$" items have been added manually.
 
 		// List of elements living outside body.
 		$nonBodyContent: X(V,U,S),
 
@@ -83,26 +83,26 @@
 		/**
 		 * List of inline (<span> like) elements.
 		 */
 		$inline : L,	// Just like span.
 
 		/**
 		 * list of elements that can be children at <body>.
 		 */
-		$body : X({script:1,style:1}, block),
+		$body : X({script:1,style:1,meta:1}, block),
 
 		$cdata : {script:1,style:1},
 
 		/**
 		 * List of empty (self-closing) elements, like "br" or "img".
 		 * @type Object
 		 * @example
 		 */
-		$empty : {area:1,base:1,br:1,col:1,hr:1,img:1,input:1,link:1,meta:1,param:1,wbr:1},
+		$empty : {area:1,base:1,br:1,col:1,hr:1,img:1,input:1,link:1,meta:1,param:1,wbr:1,meta:1,source:1,track:1,command:1,keygen:1},
 
 		/**
 		 * List of list item elements, like "li" or "dd".
 		 * @type Object
 		 * @example
 		 */
 		$listItem : {dd:1,dt:1,li:1},
 
@@ -250,17 +250,19 @@
 		mark : L,
 		time : L,
 		meter : L,
 		menu : L,
 		command : L,
 		keygen : L,
 		output : L,
 		progress : O,
-		audio : O,
-		video : O,
+		audio : X({source:1,track:1}, O),
+		video : X({source:1,track:1}, O),
+		source : {},
+		track : {},
 		details : O,
 		datagrid : O,
 		datalist : O
     };
 })();

[Carsten Schmitz]

C'mon guys, how hard is to fix this in CKEditor - does it really need more then two years?

[Jakub Ś]

Looking for example at ​http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-source-element it seems that browser support for these elements is still limited but if source and track elements are void then at least what editor can do is treat them correctly.

I will forward this to my colleagues.

[Carsten Schmitz]

Thank you for reacting so promptly. I am cautiously optimistic now ;).

[Carsten Schmitz]

Any news?

[Jakub Ś]

No one is working on this issue at the moment. I will however again ask my colleagues if they could think of working on it in one of future releases.

Seems that firefox still doesn't support track element but source seem to be supported:
​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

[Frederico Caldeira Knabben]

@c_schmitz, can you try transforming this patch into a pull request in GitHub on our current master code? You may then do some testing to be sure that it solves the problem for real. This would certainly speed things up. Thanks!

[Carsten Schmitz]

Hello,

I checked and in the latest version this seems to be already fixed. This issue can be closed. Thank you!

[Frederico Caldeira Knabben]

Thanks for the feedback!

[Jakub Ś]

Yes issue seems to be fixed but please note that.

Please note that ACF still filters these tags. I think we should add them so that ACF accepts them.

[Frederico Caldeira Knabben]

Replying to j.swiderski:

Yes issue seems to be fixed but please note that.

Please note that ACF still filters these tags. I think we should add them so that ACF accepts them.

This is a wrong assumption.

Either there is a feature in the editor that enables these tags or, if a user wants to play with the source code, ACF must be configured properly, but this is a case by case thing and cannot be generalized.