]>
Commit | Line | Data |
---|---|---|
1 | CKEDITOR.plugins.add( 'html5video', {\r | |
2 | requires: 'widget',\r | |
3 | lang: 'de,en,eu,es,ru,uk,fr',\r | |
4 | icons: 'html5video',\r | |
5 | init: function( editor ) {\r | |
6 | editor.widgets.add( 'html5video', {\r | |
7 | button: editor.lang.html5video.button,\r | |
8 | template: '<div class="ckeditor-html5-video"></div>',\r | |
9 | /*\r | |
10 | * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):\r | |
11 | * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.\r | |
12 | * - video tags with src and controls attributes.\r | |
13 | */\r | |
14 | allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];',\r | |
15 | requiredContent: 'div(ckeditor-html5-video); video[src,controls];',\r | |
16 | upcast: function( element ) {\r | |
17 | return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );\r | |
18 | },\r | |
19 | dialog: 'html5video',\r | |
20 | init: function() {\r | |
21 | var src = '';\r | |
22 | var autoplay = '';\r | |
23 | var align = this.element.getStyle( 'text-align' );\r | |
24 | \r | |
25 | var width = '';\r | |
26 | var height = '';\r | |
27 | \r | |
28 | // If there's a child (the video element)\r | |
29 | if ( this.element.getChild( 0 ) ) {\r | |
30 | // get it's attributes.\r | |
31 | src = this.element.getChild( 0 ).getAttribute( 'src' );\r | |
32 | width = this.element.getChild( 0 ).getAttribute( 'width' );\r | |
33 | height = this.element.getChild( 0 ).getAttribute( 'height' );\r | |
34 | autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );\r | |
35 | }\r | |
36 | \r | |
37 | if ( src ) {\r | |
38 | this.setData( 'src', src );\r | |
39 | \r | |
40 | if ( align ) {\r | |
41 | this.setData( 'align', align );\r | |
42 | } else {\r | |
43 | this.setData( 'align', 'none' );\r | |
44 | }\r | |
45 | \r | |
46 | if ( width ) {\r | |
47 | this.setData( 'width', width );\r | |
48 | } else {\r | |
49 | this.setData( 'width', '400' );\r | |
50 | }\r | |
51 | \r | |
52 | if ( height ) {\r | |
53 | this.setData( 'height', height );\r | |
54 | } else {\r | |
55 | this.setData( 'height', '300' );\r | |
56 | }\r | |
57 | \r | |
58 | if ( autoplay ) {\r | |
59 | this.setData( 'autoplay', 'yes' );\r | |
60 | }\r | |
61 | }\r | |
62 | },\r | |
63 | data: function() {\r | |
64 | // If there is an video source\r | |
65 | if ( this.data.src ) {\r | |
66 | // and there isn't a child (the video element)\r | |
67 | if ( !this.element.getChild( 0 ) ) {\r | |
68 | // Create a new <video> element.\r | |
69 | var videoElement = new CKEDITOR.dom.element( 'video' );\r | |
70 | // Set the controls attribute.\r | |
71 | videoElement.setAttribute( 'controls', 'controls' );\r | |
72 | // Append it to the container of the plugin.\r | |
73 | this.element.append( videoElement );\r | |
74 | }\r | |
75 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src )\r | |
76 | .setAttribute( 'width', this.data.width )\r | |
77 | .setAttribute( 'height', this.data.height );\r | |
78 | }\r | |
79 | \r | |
80 | this.element.removeStyle( 'float' );\r | |
81 | this.element.removeStyle( 'margin-left' );\r | |
82 | this.element.removeStyle( 'margin-right' );\r | |
83 | \r | |
84 | if ( this.data.align === 'none' ) {\r | |
85 | this.element.removeStyle( 'text-align' );\r | |
86 | } else {\r | |
87 | this.element.setStyle( 'text-align', this.data.align );\r | |
88 | }\r | |
89 | \r | |
90 | if ( this.data.align === 'left' ) {\r | |
91 | this.element.setStyle( 'float', this.data.align );\r | |
92 | this.element.setStyle( 'margin-right', '10px' );\r | |
93 | } else if ( this.data.align === 'right' ) {\r | |
94 | this.element.setStyle( 'float', this.data.align );\r | |
95 | this.element.setStyle( 'margin-left', '10px' );\r | |
96 | }\r | |
97 | \r | |
98 | if ( this.element.getChild( 0 ) ) {\r | |
99 | if ( this.data.autoplay === 'yes' ) {\r | |
100 | this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );\r | |
101 | } else {\r | |
102 | this.element.getChild( 0 ).removeAttribute( 'autoplay' );\r | |
103 | }\r | |
104 | }\r | |
105 | }\r | |
106 | } );\r | |
107 | \r | |
108 | if ( editor.contextMenu ) {\r | |
109 | editor.addMenuGroup( 'html5videoGroup' );\r | |
110 | editor.addMenuItem( 'html5videoPropertiesItem', {\r | |
111 | label: editor.lang.html5video.videoProperties,\r | |
112 | icon: 'html5video',\r | |
113 | command: 'html5video',\r | |
114 | group: 'html5videoGroup'\r | |
115 | });\r | |
116 | \r | |
117 | editor.contextMenu.addListener( function( element ) {\r | |
118 | if ( element &&\r | |
119 | element.getChild( 0 ) &&\r | |
120 | element.getChild( 0 ).hasClass &&\r | |
121 | element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {\r | |
122 | return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };\r | |
123 | }\r | |
124 | });\r | |
125 | }\r | |
126 | \r | |
127 | CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' );\r | |
128 | }\r | |
129 | } );\r |