diff --git a/dialogs/btbutton.js b/dialogs/btbutton.js
index 9be3db7..9144fce 100755
--- a/dialogs/btbutton.js
+++ b/dialogs/btbutton.js
@@ -12,6 +12,38 @@ CKEDITOR.dialog.add('btbutton', function (editor) {
label: lang.tabInfo,
accessKey: 'I',
elements: [
+ {
+ type: "hbox",
+ widths: ["50%", "50%"],
+ children: [
+ {
+ id: 'text',
+ type: 'text',
+ width: '200px',
+ required: true,
+ label: lang.buttonTextLabel,
+ setup: function (widget) {
+ this.setValue(widget.data.text || 'A Button');
+ },
+ commit: function (widget) {
+ widget.setData('text', this.getValue());
+ }
+ },
+ {
+ id: 'href',
+ type: 'text',
+ width: '200px',
+ required: true,
+ label: lang.buttonUrlLabel,
+ setup: function (widget) {
+ this.setValue(widget.data.href || '#');
+ },
+ commit: function (widget) {
+ widget.setData('href', this.getValue());
+ }
+ }
+ ]
+ },
{
type: "hbox",
widths: ["50%", "50%"],
@@ -46,7 +78,8 @@ CKEDITOR.dialog.add('btbutton', function (editor) {
items: [
[lang.buttonSizeSmall, 'btn-sm'],
[lang.buttonSizeNormal, ''],
- [lang.buttonSizeLarge, 'btn-lg']
+ [lang.buttonSizeLarge, 'btn-lg'],
+ [lang.buttonBlockSize, 'btn-block']
],
setup: function (widget) {
this.setValue(widget.data.btnsize || '');
@@ -59,32 +92,21 @@ CKEDITOR.dialog.add('btbutton', function (editor) {
},
{
type: "hbox",
- widths: ["50%", "50%"],
+ widths: ["50%"],
children: [
{
- id: 'text',
- type: 'text',
- width: '200px',
- required: true,
- label: lang.buttonTextLabel,
- setup: function (widget) {
- this.setValue(widget.data.text || 'A Button');
- },
- commit: function (widget) {
- widget.setData('text', this.getValue());
- }
- },
- {
- id: 'href',
- type: 'text',
- width: '200px',
- required: true,
- label: lang.buttonUrlLabel,
+ id: 'btnblock',
+ type: 'select',
+ label: lang.buttonWidthLabel,
+ items: [
+ [lang.buttonDefault, ''],
+ [lang.buttonBlockFullWidth, 'btn-block']
+ ],
setup: function (widget) {
- this.setValue(widget.data.href || '#');
+ this.setValue(widget.data.btnblock || '');
},
commit: function (widget) {
- widget.setData('href', this.getValue());
+ widget.setData('btnblock', this.getValue());
}
}
]
diff --git a/lang/en.js b/lang/en.js
index 6d5da3b..bb02c5a 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -7,6 +7,7 @@ CKEDITOR.plugins.setLang('btbutton', 'en', {
tabIcons: 'Icons',
buttonStyleLabel: 'Style',
buttonSizeLabel: 'Size',
+ buttonWidthLabel: 'Width',
buttonTextLabel: 'Text',
buttonUrlLabel: 'URL',
buttonTargetLabel: 'Target',
@@ -17,8 +18,12 @@ CKEDITOR.plugins.setLang('btbutton', 'en', {
buttonSuccess: 'Success',
buttonWarning: 'Warning',
buttonDanger: 'Danger',
+ buttonDark: 'Dark',
+ buttonLight: 'Light',
buttonSizeExSmall: 'Extra Small',
buttonSizeSmall: 'Small',
buttonSizeNormal: 'Normal',
- buttonSizeLarge: 'Large'
+ buttonSizeLarge: 'Large',
+ buttonBlockFullWidth: 'Full Width'
+
});
diff --git a/lang/pt-br.js b/lang/pt-br.js
index 3459f68..f3685ee 100644
--- a/lang/pt-br.js
+++ b/lang/pt-br.js
@@ -7,6 +7,7 @@ CKEDITOR.plugins.setLang('btbutton', 'pt-br', {
tabIcons: 'Icones',
buttonStyleLabel: 'Estilos',
buttonSizeLabel: 'Tamanho',
+ buttonWidthLabel: 'Width',
buttonTextLabel: 'Texto',
buttonUrlLabel: 'URL',
buttonTargetLabel: 'Target',
@@ -17,9 +18,12 @@ CKEDITOR.plugins.setLang('btbutton', 'pt-br', {
buttonSuccess: 'Success',
buttonWarning: 'Warning',
buttonDanger: 'Danger',
+ buttonDark: 'Dark',
+ buttonLight: 'Light',
buttonSizeExSmall: 'Extra Pequeno',
buttonSizeSmall: 'Pequeno',
buttonSizeNormal: 'Normal',
- buttonSizeLarge: 'Grande'
+ buttonSizeLarge: 'Grande',
+ buttonBlockFullWidth: 'Full Width'
});
diff --git a/lang/ru.js b/lang/ru.js
index f894854..c1458b4 100644
--- a/lang/ru.js
+++ b/lang/ru.js
@@ -7,6 +7,7 @@ CKEDITOR.plugins.setLang('btbutton', 'ru', {
tabIcons: 'Иконки',
buttonStyleLabel: 'Стиль',
buttonSizeLabel: 'Размер',
+ buttonWidthLabel: 'Width',
buttonTextLabel: 'Текст',
buttonUrlLabel: 'Ссылка (URL)',
buttonTargetLabel: 'Цель',
@@ -17,8 +18,11 @@ CKEDITOR.plugins.setLang('btbutton', 'ru', {
buttonSuccess: 'Зеленая (success)',
buttonWarning: 'Оранжевая (warning)',
buttonDanger: 'Красная (danger)',
+ buttonDark: 'Dark',
+ buttonLight: 'Light',
buttonSizeExSmall: 'Очень маленький (XS)',
buttonSizeSmall: 'Маленький (S)',
buttonSizeNormal: 'Обычный',
- buttonSizeLarge: 'Большой (L)'
+ buttonSizeLarge: 'Большой (L)',
+ buttonBlockFullWidth: 'Full Width'
});
diff --git a/lang/uk.js b/lang/uk.js
index bb6b324..a931ea1 100644
--- a/lang/uk.js
+++ b/lang/uk.js
@@ -7,6 +7,7 @@ CKEDITOR.plugins.setLang('btbutton', 'uk', {
tabIcons: 'Іконки',
buttonStyleLabel: 'Стиль',
buttonSizeLabel: 'Розмір',
+ buttonWidthLabel: 'Width',
buttonTextLabel: 'Текст',
buttonUrlLabel: 'URL',
buttonTargetLabel: 'Ціль',
@@ -17,8 +18,11 @@ CKEDITOR.plugins.setLang('btbutton', 'uk', {
buttonSuccess: 'Успіх',
buttonWarning: 'Попередження',
buttonDanger: 'Небезбека',
+ buttonDark: 'Dark',
+ buttonLight: 'Light',
buttonSizeExSmall: 'Дуже мала',
buttonSizeSmall: 'Мала',
buttonSizeNormal: 'Звичайна',
- buttonSizeLarge: 'Велика'
+ buttonSizeLarge: 'Велика',
+ buttonBlockFullWidth: 'Full Width'
});
diff --git a/plugin.js b/plugin.js
index 1801a4d..2d3d6bf 100644
--- a/plugin.js
+++ b/plugin.js
@@ -1,155 +1,161 @@
(function () {
- CKEDITOR.plugins.add('btbutton', {
- lang: 'en,ru,pt-br,uk',
- requires: 'widget,dialog',
- icons: 'btbutton',
- init: function (editor) {
- // Allow any attributes.
- editor.config.extraAllowedContent = '*(*);*{*}';
- var lang = editor.lang.btbutton;
-
- CKEDITOR.dialog.add('btbutton', this.path + 'dialogs/btbutton.js');
-
- // Add widget
- editor.ui.addButton('btbutton', {
- label: lang.buttonTitle,
- command: 'btbutton',
- icon: this.path + 'icons/btbutton.png'
- });
-
- editor.widgets.add('btbutton', {
- dialog: 'btbutton',
-
- init: function () {
+ CKEDITOR.plugins.add('btbutton', {
+ lang: 'en,ru,pt-br,uk',
+ requires: 'widget,dialog',
+ icons: 'btbutton',
+ init: function (editor) {
+ // Allow any attributes.
+ editor.config.extraAllowedContent = '*(*);*{*}';
+ var lang = editor.lang.btbutton;
+
+ CKEDITOR.dialog.add('btbutton', this.path + 'dialogs/btbutton.js');
+
+ // Add widget
+ editor.ui.addButton('btbutton', {
+ label: lang.buttonTitle,
+ command: 'btbutton',
+ icon: this.path + 'icons/btbutton.png'
+ });
+
+ editor.widgets.add('btbutton', {
+ dialog: 'btbutton',
+
+ init: function () {
+ var $el = jQuery(this.element.$);
+
+ if ($el.hasClass("btn-link")) {
+ this.data.btntype = "btn-link";
+ } else if ($el.hasClass("btn-default")) {
+ this.data.btntype = "btn-default";
+ } else if ($el.hasClass("btn-primary")) {
+ this.data.btntype = "btn-primary";
+ } else if ($el.hasClass("btn-info")) {
+ this.data.btntype = "btn-info";
+ } else if ($el.hasClass("btn-success")) {
+ this.data.btntype = "btn-success";
+ } else if ($el.hasClass("btn-warning")) {
+ this.data.btntype = "btn-warning";
+ } else if ($el.hasClass("btn-danger")) {
+ this.data.btntype = "btn-danger";
+ }
+
+ if ($el.hasClass("btn-xs")) {
+ this.data.btnsize = "btn-xs";
+ } else if ($el.hasClass("btn-sm")) {
+ this.data.btnsize = "btn-sm";
+ } else if ($el.hasClass("btn-lg")) {
+ this.data.btnsize = "btn-lg";
+ }
+
+ if ($el.hasClass("btn-block")) {
+ this.data.btnblock = "btn-block";
+ }
+
+ this.data.href = $el.attr('href');
+
+ this.data.target = $el.attr('target');
+
+ this.data.text = jQuery('.text', $el).text();
+
+ var bs_icon_left = jQuery('.bs-icon-left', $el);
+ var bs_icon_right = jQuery('.bs-icon-right', $el);
+ var fa_icon_left = jQuery('.fa-icon-left', $el);
+ var fa_icon_right = jQuery('.fa-icon-right', $el);
+
+ if (bs_icon_left.length > 0) {
+ bs_icon_left.removeClass('bs-icon-left').removeClass('glyphicon');
+ this.data.bsiconleft = bs_icon_left.attr('class');
+ bs_icon_left.addClass('bs-icon-left').addClass('glyphicon');
+ }
+
+ if (bs_icon_right.length > 0) {
+ bs_icon_right.removeClass('bs-icon-right').removeClass('glyphicon');
+ this.data.bsiconright = bs_icon_right.attr('class');
+ bs_icon_right.addClass('bs-icon-right').addClass('glyphicon');
+ }
+
+ if (fa_icon_left.length > 0) {
+ fa_icon_left.removeClass('fa-icon-left').removeClass('fas');
+ this.data.faiconleft = fa_icon_left.attr('class');
+ fa_icon_left.addClass('fa-icon-left').addClass('fas');
+ }
+
+ if (fa_icon_right.length > 0) {
+ fa_icon_right.removeClass('fa-icon-right').removeClass('fas');
+ this.data.faiconright = fa_icon_right.attr('class');
+ fa_icon_right.addClass('fa-icon-right').addClass('fas');
+ }
+ },
+
+ template: '' + '' + '',
+
+ data: function () {
var $el = jQuery(this.element.$);
- if ($el.hasClass("btn-link")) {
- this.data.btntype = "btn-link";
- } else if ($el.hasClass("btn-default")) {
- this.data.btntype = "btn-default";
- } else if ($el.hasClass("btn-primary")) {
- this.data.btntype = "btn-primary";
- } else if ($el.hasClass("btn-info")) {
- this.data.btntype = "btn-info";
- } else if ($el.hasClass("btn-success")) {
- this.data.btntype = "btn-success";
- } else if ($el.hasClass("btn-warning")) {
- this.data.btntype = "btn-warning";
- } else if ($el.hasClass("btn-danger")) {
- this.data.btntype = "btn-danger";
- } else if ($el.hasClass("btn-dark")) {
- this.data.btntype = "btn-dark";
- } else if ($el.hasClass("btn-light")) {
- this.data.btntype = "btn-light";
+ if (this.data.btntype) {
+ $el.removeClass('btn-link btn-default btn-primary btn-info btn-success btn-warning btn-danger').addClass(this.data.btntype);
}
- if ($el.hasClass("btn-sm")) {
- this.data.btnsize = "btn-sm";
- } else if ($el.hasClass("btn-lg")) {
- this.data.btnsize = "btn-lg";
+ $el.removeClass('btn-xs btn-sm btn-lg');
+ if (this.data.btnsize) {
+ $el.addClass(this.data.btnsize);
+ }
+ $el.removeClass('btn-block');
+ if (this.data.btnblock) {
+ $el.addClass(this.data.btnblock);
}
- this.data.href = $el.attr('href');
-
- this.data.target = $el.attr('target');
+ if (this.data.href) {
+ $el.attr('href', this.data.href);
+ this.element.$.removeAttribute('data-cke-saved-href');
+ }
- this.data.text = jQuery('.text', $el).text();
+ if (this.data.target && this.data.target != '') {
+ $el.attr('target', this.data.target);
+ }
- var bs_icon_left = jQuery('.bs-icon-left', $el);
- var bs_icon_right = jQuery('.bs-icon-right', $el);
- var fa_icon_left = jQuery('.fa-icon-left', $el);
- var fa_icon_right = jQuery('.fa-icon-right', $el);
+ if (this.data.text) {
+ jQuery('.text', $el).text(this.data.text);
+ }
- if (bs_icon_left.length > 0) {
- bs_icon_left.removeClass('bs-icon-left').removeClass('glyphicon');
- this.data.bsiconleft = bs_icon_left.attr('class');
- bs_icon_left.addClass('bs-icon-left').addClass('glyphicon');
+ if (this.data.hasOwnProperty('bsiconleft')) {
+ jQuery('.bs-icon-left', $el).remove();
+ if (this.data.bsiconleft) {
+ $el.prepend(' \n');
+ }
}
- if (bs_icon_right.length > 0) {
- bs_icon_right.removeClass('bs-icon-right').removeClass('glyphicon');
- this.data.bsiconright = bs_icon_right.attr('class');
- bs_icon_right.addClass('bs-icon-right').addClass('glyphicon');
+ if (this.data.hasOwnProperty('bsiconright')) {
+ jQuery('.bs-icon-right', $el).remove();
+ if (this.data.bsiconright) {
+ $el.append(' \n');
+ }
}
- if (fa_icon_left.length > 0) {
- fa_icon_left.removeClass('fa-icon-left').removeClass('fa');
- this.data.faiconleft = fa_icon_left.attr('class');
- fa_icon_left.addClass('fa-icon-left').addClass('fa');
+ if (this.data.hasOwnProperty('faiconleft')) {
+ jQuery('.fa-icon-left', $el).remove();
+ if (this.data.faiconleft) {
+ $el.prepend(' \n');
+ }
}
- if (fa_icon_right.length > 0) {
- fa_icon_right.removeClass('fa-icon-right').removeClass('fa');
- this.data.faiconright = fa_icon_right.attr('class');
- fa_icon_right.addClass('fa-icon-right').addClass('fa');
+ if (this.data.hasOwnProperty('faiconright')) {
+ jQuery('.fa-icon-right', $el).remove();
+ if (this.data.faiconright) {
+ $el.append(' \n');
+ }
}
- },
-
- template: '' + '' + '',
-
- data: function () {
- var $el = jQuery(this.element.$);
-
- if (this.data.btntype) {
- $el.removeClass('btn-link btn-default btn-primary btn-info btn-success btn-warning btn-danger').addClass(this.data.btntype);
- }
-
- $el.removeClass('btn-xs btn-sm btn-lg');
- if (this.data.btnsize) {
- $el.addClass(this.data.btnsize);
- }
-
- if (this.data.href) {
- $el.attr('href', this.data.href);
- this.element.$.removeAttribute('data-cke-saved-href');
- }
-
- if (this.data.target && this.data.target != '') {
- $el.attr('target', this.data.target);
- }
-
- if (this.data.text) {
- jQuery('.text', $el).text(this.data.text);
- }
-
- if (this.data.hasOwnProperty('bsiconleft')) {
- jQuery('.bs-icon-left', $el).remove();
- if (this.data.bsiconleft) {
- $el.prepend(' \n');
- }
- }
-
- if (this.data.hasOwnProperty('bsiconright')) {
- jQuery('.bs-icon-right', $el).remove();
- if (this.data.bsiconright) {
- $el.append(' \n');
- }
- }
-
- if (this.data.hasOwnProperty('faiconleft')) {
- jQuery('.fa-icon-left', $el).remove();
- if (this.data.faiconleft) {
- $el.prepend(' \n');
- }
- }
-
- if (this.data.hasOwnProperty('faiconright')) {
- jQuery('.fa-icon-right', $el).remove();
- if (this.data.faiconright) {
- $el.append(' \n');
- }
- }
- },
-
- requiredContent: 'a(btn)',
-
- upcast: function (element) {
- return element.name == 'a' && element.hasClass('btn');
- }
- });
- }
- }
- );
+ },
+
+ requiredContent: 'a(btn)',
+
+ upcast: function (element) {
+ return element.name == 'a' && element.hasClass('btn');
+ }
+ });
+ }
+ }
+ );
})();