Opened 8 years ago

Closed 6 years ago

Last modified 6 years ago

#8119 closed New Feature (worksforme)

HTML5 / Add support for source and track elements

Reported by: Russ Tennant Owned by:
Priority: Normal Milestone:
Component: Core : DTD Version: 3.0
Keywords: HTML5 Cc:

Description

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>

Change History (14)

comment:1 Changed 8 years ago by 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

comment:2 Changed 8 years ago by Jakub Ś

Keywords: HTML5 added
Status: newconfirmed
Version: 3.6.13.0

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

Last edited 8 years ago by Jakub Ś (previous) (diff)

comment:3 Changed 6 years ago by 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?

comment:4 Changed 6 years ago by 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 (&lt;span&gt; like) elements.
 		 */
 		$inline : L,	// Just like span.
 
 		/**
 		 * list of elements that can be children at &lt;body&gt;.
 		 */
-		$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
     };
 })();

comment:5 Changed 6 years ago by Carsten Schmitz

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

comment:6 Changed 6 years ago by 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.

comment:7 Changed 6 years ago by Carsten Schmitz

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

comment:8 Changed 6 years ago by Carsten Schmitz

Any news?

comment:9 Changed 6 years ago by 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

comment:10 Changed 6 years ago by 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!

comment:11 Changed 6 years ago by Carsten Schmitz

Component: GeneralCore : DTD

Hello,

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

comment:12 Changed 6 years ago by Frederico Caldeira Knabben

Resolution: worksforme
Status: confirmedclosed

Thanks for the feedback!

comment:13 Changed 6 years ago by 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.

comment:14 in reply to:  13 Changed 6 years ago by 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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy