]>
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, controls, width and height attributes.\r | |
13 | */\r | |
14 | allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay,width, height]{max-width,height};',\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 | responsive = this.element.getAttribute( 'data-responsive' );\r | |
36 | }\r | |
37 | \r | |
38 | if ( src ) {\r | |
39 | this.setData( 'src', src );\r | |
40 | \r | |
41 | if ( align ) {\r | |
42 | this.setData( 'align', align );\r | |
43 | } else {\r | |
44 | this.setData( 'align', 'none' );\r | |
45 | }\r | |
46 | \r | |
47 | if ( width ) {\r | |
48 | this.setData( 'width', width );\r | |
49 | }\r | |
50 | \r | |
51 | if ( height ) {\r | |
52 | this.setData( 'height', height );\r | |
53 | }\r | |
54 | \r | |
55 | if ( autoplay ) {\r | |
56 | this.setData( 'autoplay', 'yes' );\r | |
57 | }\r | |
58 | \r | |
59 | if ( responsive ) {\r | |
60 | this.setData( 'responsive', responsive );\r | |
61 | }\r | |
62 | }\r | |
63 | },\r | |
64 | data: function() {\r | |
65 | // If there is an video source\r | |
66 | if ( this.data.src ) {\r | |
67 | // and there isn't a child (the video element)\r | |
68 | if ( !this.element.getChild( 0 ) ) {\r | |
69 | // Create a new <video> element.\r | |
70 | var videoElement = new CKEDITOR.dom.element( 'video' );\r | |
71 | // Set the controls attribute.\r | |
72 | videoElement.setAttribute( 'controls', 'controls' );\r | |
73 | // Append it to the container of the plugin.\r | |
74 | this.element.append( videoElement );\r | |
75 | }\r | |
76 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src );\r | |
77 | if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width );\r | |
78 | if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height );\r | |
79 | \r | |
80 | if ( this.data.responsive ) {\r | |
81 | this.element.setAttribute("data-responsive", this.data.responsive);\r | |
82 | this.element.getChild( 0 ).setStyle( 'max-width', '100%' );\r | |
83 | this.element.getChild( 0 ).setStyle( 'height', 'auto' );\r | |
84 | } else {\r | |
85 | this.element.getChild( 0 ).removeStyle( 'max-width' );\r | |
86 | this.element.getChild( 0 ).removeStyle( 'height' );\r | |
87 | }\r | |
88 | }\r | |
89 | \r | |
90 | this.element.removeStyle( 'float' );\r | |
91 | this.element.removeStyle( 'margin-left' );\r | |
92 | this.element.removeStyle( 'margin-right' );\r | |
93 | \r | |
94 | if ( this.data.align === 'none' ) {\r | |
95 | this.element.removeStyle( 'text-align' );\r | |
96 | } else {\r | |
97 | this.element.setStyle( 'text-align', this.data.align );\r | |
98 | }\r | |
99 | \r | |
100 | if ( this.data.align === 'left' ) {\r | |
101 | this.element.setStyle( 'float', this.data.align );\r | |
102 | this.element.setStyle( 'margin-right', '10px' );\r | |
103 | } else if ( this.data.align === 'right' ) {\r | |
104 | this.element.setStyle( 'float', this.data.align );\r | |
105 | this.element.setStyle( 'margin-left', '10px' );\r | |
106 | }\r | |
107 | \r | |
108 | if ( this.element.getChild( 0 ) ) {\r | |
109 | if ( this.data.autoplay === 'yes' ) {\r | |
110 | this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );\r | |
111 | } else {\r | |
112 | this.element.getChild( 0 ).removeAttribute( 'autoplay' );\r | |
113 | }\r | |
114 | }\r | |
115 | }\r | |
116 | } );\r | |
117 | \r | |
118 | if ( editor.contextMenu ) {\r | |
119 | editor.addMenuGroup( 'html5videoGroup' );\r | |
120 | editor.addMenuItem( 'html5videoPropertiesItem', {\r | |
121 | label: editor.lang.html5video.videoProperties,\r | |
122 | icon: 'html5video',\r | |
123 | command: 'html5video',\r | |
124 | group: 'html5videoGroup'\r | |
125 | });\r | |
126 | \r | |
127 | editor.contextMenu.addListener( function( element ) {\r | |
128 | if ( element &&\r | |
129 | element.getChild( 0 ) &&\r | |
130 | element.getChild( 0 ).hasClass &&\r | |
131 | element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {\r | |
132 | return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };\r | |
133 | }\r | |
134 | });\r | |
135 | }\r | |
136 | \r | |
137 | CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' );\r | |
138 | }\r | |
139 | } );\r |