1 | CKEDITOR.plugins.add( 'jc_contentbox', { |
---|
2 | requires: 'widget', |
---|
3 | icons: 'contentbox', |
---|
4 | lang: 'en,de', |
---|
5 | init: function( editor ) { |
---|
6 | CKEDITOR.dialog.add( 'jc-contentbox-dialog', function( editor ) { |
---|
7 | return { |
---|
8 | title: editor.lang.jc_contentbox.dialog.title, |
---|
9 | minWidth: 200, |
---|
10 | minHeight: 100, |
---|
11 | contents: [ |
---|
12 | { |
---|
13 | id: 'info', |
---|
14 | elements: [ |
---|
15 | { |
---|
16 | id: 'align', |
---|
17 | type: 'select', |
---|
18 | label: editor.lang.jc_contentbox.dialog.align, |
---|
19 | width: '100px', |
---|
20 | items: [ |
---|
21 | [ editor.lang.common.notSet, '' ], |
---|
22 | [ editor.lang.common.alignLeft, 'left' ], |
---|
23 | [ editor.lang.common.alignRight, 'right' ], |
---|
24 | [ editor.lang.common.alignCenter, 'center' ] |
---|
25 | ], |
---|
26 | setup: function( widget ) { |
---|
27 | this.setValue( widget.data.align ); |
---|
28 | }, |
---|
29 | commit: function( widget ) { |
---|
30 | widget.setData( 'align', this.getValue() ); |
---|
31 | } |
---|
32 | }, |
---|
33 | { |
---|
34 | id: 'width', |
---|
35 | type: 'text', |
---|
36 | label: editor.lang.jc_contentbox.dialog.width, |
---|
37 | width: '100px', |
---|
38 | setup: function( widget ) { |
---|
39 | this.setValue( widget.data.width ); |
---|
40 | }, |
---|
41 | commit: function( widget ) { |
---|
42 | widget.setData( 'width', this.getValue() ); |
---|
43 | } |
---|
44 | } |
---|
45 | ] |
---|
46 | } |
---|
47 | ] |
---|
48 | }; |
---|
49 | } ); |
---|
50 | |
---|
51 | editor.widgets.add( 'contentbox', { |
---|
52 | allowedContent:'div(!jc-contentbox,align-left,align-right,align-center){width};', |
---|
53 | |
---|
54 | requiredContent: 'div(jc-contentbox)', |
---|
55 | |
---|
56 | editables: { |
---|
57 | content: '.jc-contentbox' |
---|
58 | }, |
---|
59 | |
---|
60 | template: '<div class="jc-contentbox">' + editor.lang.jc_contentbox.content + '</div>', |
---|
61 | button: editor.lang.jc_contentbox.button, |
---|
62 | dialog: 'jc-contentbox-dialog', |
---|
63 | upcast: function( element ) { |
---|
64 | return element.name == 'div' && element.hasClass( 'jc-contentbox' ); |
---|
65 | }, |
---|
66 | init: function() { |
---|
67 | var width = this.element.getStyle( 'width' ); |
---|
68 | if ( width ) { |
---|
69 | this.setData( 'width', width ); |
---|
70 | } |
---|
71 | if ( this.element.hasClass( 'align-left' ) ) { |
---|
72 | this.setData( 'align', 'left' ); |
---|
73 | } |
---|
74 | if ( this.element.hasClass( 'align-right' ) ) { |
---|
75 | this.setData( 'align', 'right' ); |
---|
76 | } |
---|
77 | if ( this.element.hasClass( 'align-center' ) ) { |
---|
78 | this.setData( 'align', 'center' ); |
---|
79 | } |
---|
80 | }, |
---|
81 | data: function() { |
---|
82 | if ( !this.data.width ) { |
---|
83 | this.element.removeStyle( 'width' ); |
---|
84 | } else if ( /^\d+$/.test(this.data.width) ){ |
---|
85 | this.element.setStyle( 'width', this.data.width + 'px' ); |
---|
86 | } else { |
---|
87 | this.element.setStyle( 'width', this.data.width ); |
---|
88 | } |
---|
89 | |
---|
90 | this.element.removeClass( 'align-left' ); |
---|
91 | this.element.removeClass( 'align-right' ); |
---|
92 | this.element.removeClass( 'align-center' ); |
---|
93 | if ( this.data.align ) { |
---|
94 | this.element.addClass( 'align-' + this.data.align ); |
---|
95 | } |
---|
96 | } |
---|
97 | } ); |
---|
98 | } |
---|
99 | } ); |
---|