1 // Init default alert classes
3 CKEDITOR.config.widgetbootstrapAlert_alertTypes = {
11 CKEDITOR.plugins.add( 'widgetbootstrap', {
14 icons: 'widgetbootstrapLeftCol,widgetbootstrapRightCol,widgetbootstrapTwoCol,widgetbootstrapThreeCol,widgetbootstrapAlert',
23 init: function( editor ) {
25 // Configurable settings
26 //var allowedWidget = editor.config.widgetbootstrap_allowedWidget != undefined ? editor.config.widgetbootstrap_allowedFull :
27 // 'p h2 h3 h4 h5 h6 span br ul ol li strong em img[!src,alt,width,height]';
28 var allowedFull = editor.config.widgetbootstrap_allowedFull != undefined ? editor.config.widgetbootstrap_allowedFull :
29 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
30 //var allowedText = editor.config.widgetbootstrap_allowedText != undefined ? editor.config.widgetbootstrap_allowedFull :
31 // 'p span br ul ol li strong em';
34 allowedWidget = allowedFull;
35 //allowedText = allowedWidget;
37 var showButtons = editor.config.widgetbootstrapShowButtons != undefined ? editor.config.widgetbootstrapShowButtons : true;
40 editor.widgets.add( 'widgetbootstrapLeftCol', {
42 button: showButtons ? 'Add left column box' : undefined,
45 '<div class="row two-col-left">' +
46 '<div class="col-md-3 col-sidebar"><p><img src="http://placehold.it/300x250&text=Image" /></p></div>' +
47 '<div class="col-md-9 col-main"><p>Content</p></div>' +
52 selector: '.col-sidebar',
53 allowedContent: allowedWidget
56 selector: '.col-main',
57 allowedContent: allowedWidget
61 allowedContent: allowedFull,
63 upcast: function( element ) {
64 return element.name == 'div' && element.hasClass( 'two-col-right-left' );
69 editor.widgets.add( 'widgetbootstrapRightCol', {
71 button: showButtons ? 'Add right column box' : undefined,
74 '<div class="row two-col-right">' +
75 '<div class="col-md-9 col-main"><p>Content</p></div>' +
76 '<div class="col-md-3 col-sidebar"><p><img src="http://placehold.it/300x250&text=Image" /></p></div>' +
81 selector: '.col-sidebar',
82 allowedContent: allowedWidget
85 selector: '.col-main',
86 allowedContent: allowedWidget
90 allowedContent: allowedFull,
92 upcast: function( element ) {
93 return element.name == 'div' && element.hasClass( 'two-col-right' );
98 editor.widgets.add( 'widgetbootstrapTwoCol', {
100 button: showButtons ? 'Add two column box' : undefined,
103 '<div class="row two-col">' +
104 '<div class="col-md-6 col-1"><p><img src="http://placehold.it/500x280&text=Image" /></p><p>Content</p></div>' +
105 '<div class="col-md-6 col-2"><p><img src="http://placehold.it/500x280&text=Image" /></p><p>Content</p></div>' +
111 allowedContent: allowedWidget
115 allowedContent: allowedWidget
119 allowedContent: allowedFull,
121 upcast: function( element ) {
122 return element.name == 'div' && element.hasClass( 'two-col' );
127 editor.widgets.add( 'widgetbootstrapThreeCol', {
129 button: showButtons ? 'Add three column box' : undefined,
132 '<div class="row three-col">' +
133 '<div class="col-md-4 col-1"><p><img src="http://placehold.it/400x225&text=Image" /></p><p>Text below</p></div>' +
134 '<div class="col-md-4 col-2"><p><img src="http://placehold.it/400x225&text=Image" /></p><p>Text below</p></div>' +
135 '<div class="col-md-4 col-3"><p><img src="http://placehold.it/400x225&text=Image" /></p><p>Text below</p></div>' +
141 allowedContent: allowedWidget
145 allowedContent: allowedWidget
149 allowedContent: allowedWidget
153 allowedContent: allowedFull,
155 upcast: function( element ) {
156 return element.name == 'div' && element.hasClass( 'three-col' );
161 editor.addCommand( 'openwidgetbootstrapAlert', new CKEDITOR.dialogCommand( 'widgetbootstrapAlert' ) );
163 // Add foundation alert button
164 // Textare decodes html entities
165 //var textarea = new CKEDITOR.dom.element( 'textarea' );
167 editor.widgets.add( 'widgetbootstrapAlert', {
169 button: showButtons ? 'Add alert box' : undefined,
170 dialog: 'widgetbootstrapAlert',
172 template: '<div class="alert-box"><div class="alert-text">Some Text</span></div>',
176 selector: '.alert-text',
177 allowedContent: allowedWidget
181 allowedContent: allowedFull,
184 var newData = this.data,
185 oldData = this.oldData;
187 /*if( newData.alertText ) {
188 this.element.getChild( 0 ).setHtml( CKEDITOR.tools.htmlEncode( newData.alertText ) );
191 if ( oldData && newData.type != oldData.type )
192 this.element.removeClass(oldData.type);
195 this.element.addClass(newData.type);
198 this.oldData = CKEDITOR.tools.copy( newData );
201 upcast: function( el, data ) {
202 if (el.name != 'div' || !el.hasClass( 'alert-box' ))
205 var childrenArray = el.children,
208 if ( childrenArray.length !== 1 || !( alertText = childrenArray[ 0 ] ).hasClass('alert-text'))
211 // Acceptable alert types
212 var alertTypes = CKEDITOR.config.widgetbootstrapAlert_alertTypes;
214 for(var i = 0; i < el.classes.length; i++) {
215 if(el.classes[i] != 'alert-box') {
216 for ( alertName in alertTypes ) {
217 if(el.classes[i] == alertName) {
218 data.type = alertName;
224 // Use textarea to decode HTML entities (#11926).
225 //textarea.setHtml( alertText.getHtml() );
226 //data.alertText = textarea.getValue();
231 downcast: function( el ) {
237 CKEDITOR.dialog.add( 'widgetbootstrapAlert', this.path + 'dialogs/widgetbootstrapAlert.js' );
239 /*CKEDITOR.dialog.add( 'widgetbootstrapAccordion', this.path + 'dialogs/widgetbootstrapAccordion.js' );
240 editor.widgets.add( 'widgetbootstrapAccordion', {
242 button: showButtons ? 'Add accordion box' : undefined,
245 '<dl class="accordion" data-accordion><div class="col-1"></div></dl>',
248 allowedContent: allowedFull,
250 dialog: 'widgetbootstrapAccordion',
252 upcast: function( element ) {
253 return element.name == 'div' && element.hasClass( 'accordion' );
257 var width = this.element.getStyle( 'width' );
259 this.setData( 'width', width );
260 if ( this.element.hasClass( 'align-left' ) )
261 this.setData( 'align', 'left' );
262 if ( this.element.hasClass( 'align-right' ) )
263 this.setData( 'align', 'right' );
264 if ( this.element.hasClass( 'align-center' ) )
265 this.setData( 'align', 'center' );
271 var name = this.data.name != undefined ? this.data.name : 'accordion';
272 var count = this.data.count != undefined ? this.data.count : 0;
273 //@todo: var prevCount = this.data.prevCount != undefined ? this.data.prevCount :
276 if (this.data.prevCount == undefined || this.data.prevCount < count) {
277 for (var i=this.data.prevCount != undefined ? this.data.prevCount : 1; i<=count; i++) {
278 var active = this.data.activePanel == i ? ' active' : '';
280 '<dd class="accordion-navigation">' +
281 '<a href="#'+ name+i +'"><div class="accordion-header-'+i+'">Heading '+i+'</div></a>' +
282 '<div id="panel'+ name+i +'" class="content content-'+i+active+'">' +
286 var newPanel = CKEDITOR.dom.element.createFromHtml( template );
287 this.element.append(newPanel);
290 // For some reason, the initEditable call needs to come in a separate for loop
291 // the html code added wasn't in the DOM yet
292 for (var i=this.data.prevCount != undefined ? this.data.prevCount : 1; i<=count; i++) {
293 this.initEditable( 'heading'+i, {
294 selector: '.accordion-header-'+i
296 this.initEditable( 'content'+i, {
297 selector: '.content-'+i
303 if (this.data.prevCount != undefined && this.data.prevCount > count) {
308 this.data.prevCount = i;
312 // Append the widget's styles when in the CKEditor edit page,
313 // added for better user experience.
314 // Assign or append the widget's styles depending on the existing setup.
315 if (typeof editor.config.contentsCss == 'object') {
316 editor.config.contentsCss.push(CKEDITOR.getUrl(this.path + 'contents.css'));
320 editor.config.contentsCss = [editor.config.contentsCss, CKEDITOR.getUrl(this.path + 'contents.css')];