Skip to content

Commit

Permalink
refactor(plugins): made a real plugin support
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-D
Alex-D committed Mar 21, 2016
1 parent bcafb93 commit 2b7e2b5
Show file tree
Hide file tree
Showing 9 changed files with 505 additions and 430 deletions.
2 changes: 1 addition & 1 deletion .jshintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"trailing": true,
"maxparams": 5,
"maxdepth": 5,
"maxstatements": 35,
"maxstatements": 40,
"maxcomplexity": 20,
"maxlen": 1200,
"eqnull": true,
Expand Down
14 changes: 9 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,11 +145,12 @@ <h2 class="title">The dark side of Trumbowyg</h2>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="dist/trumbowyg.js"></script>
<script src="dist/langs/fr.min.js"></script>
<script src="dist/plugins/upload/trumbowyg.upload.js"></script>
<script src="dist/plugins/base64/trumbowyg.base64.js"></script>
<script src="dist/plugins/colors/trumbowyg.colors.js"></script>
<script src="dist/plugins/noembed/trumbowyg.noembed.js"></script>
<script src="dist/plugins/pasteimage/trumbowyg.pasteimage.js"></script>
<script src="dist/plugins/preformatted/trumbowyg.preformatted.js"></script>
<script src="dist/plugins/upload/trumbowyg.upload.js"></script>
<script>
/** Default editor configuration **/
$('#default-editor, #empty-textarea')
Expand All @@ -173,12 +174,12 @@ <h2 class="title">The dark side of Trumbowyg</h2>


/* Add imagur parameters to upload plugin */
$.extend(true, $.trumbowyg.opts.upload, {
var uploadOptions = {
serverPath: 'https://api.imgur.com/3/image',
fileFieldName: 'image',
headers: {'Authorization': 'Client-ID 9e57cb1c4791cea'},
urlPropertyName: 'data.link'
});
};

/** Full flat button pane **/
$('#flat-buttonpane')
Expand All @@ -195,11 +196,14 @@ <h2 class="title">The dark side of Trumbowyg</h2>
['horizontalRule'],
['removeformat'],

['upload', 'base64'],
['upload', 'base64', 'noembed'],
['foreColor', 'backColor'],
['preformatted'],
['fullscreen', 'close']
]
],
plugins: {
upload: uploadOptions
}
});


Expand Down
85 changes: 47 additions & 38 deletions plugins/base64/trumbowyg.base64.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
(function ($) {
'use strict';

var isSupported = function () {
return typeof FileReader !== 'undefined';
};

$.extend(true, $.trumbowyg, {
langs: {
// jshint camelcase:false
Expand All @@ -26,54 +30,59 @@
file: 'Soubor'
},
zh_cn: {
base64: '图片（Base64编码）',
file: '文件'
base64: '图片（Base64编码）',
file: '文件'
}
},
// jshint camelcase:true

opts: {
btnsDef: {
base64: {
isSupported: function () {
return typeof FileReader !== 'undefined';
},
fn: function (params, tbw) {
var file;
tbw.openModalInsert(
// Title
tbw.lang.base64,
plugins: {
base64: {
shouldInit: isSupported,
init: function (trumbowyg) {
var btnDef = {
isSupported: isSupported,
fn: function () {
trumbowyg.saveRange();

var file;
trumbowyg.openModalInsert(
// Title
trumbowyg.lang.base64,

// Fields
{
file: {
type: 'file',
required: true
// Fields
{
file: {
type: 'file',
required: true
},
alt: {
label: 'description',
value: trumbowyg.getRangeText()
}
},
alt: {
label: 'description',
value: tbw.getRangeText()
}
},

// Callback
function (values) {
var fReader = new FileReader();
// Callback
function (values) {
var fReader = new FileReader();

fReader.onloadend = function () {
tbw.execCmd('insertImage', fReader.result);
$(['img[src="', fReader.result, '"]:not([alt])'].join(''), tbw.$box).attr('alt', values.alt);
tbw.closeModal();
};
fReader.onloadend = function () {
trumbowyg.execCmd('insertImage', fReader.result);
$(['img[src="', fReader.result, '"]:not([alt])'].join(''), trumbowyg.$box).attr('alt', values.alt);
trumbowyg.closeModal();
};

fReader.readAsDataURL(file);
}
);

fReader.readAsDataURL(file);
}
);
$('input[type=file]').on('change', function (e) {
file = e.target.files[0];
});
}
};

$('input[type=file]').on('change', function (e) {
file = e.target.files[0];
});
}
trumbowyg.addBtnDef('base64', btnDef);
}
}
}
Expand Down
111 changes: 59 additions & 52 deletions plugins/colors/trumbowyg.colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@
foreColor: '文字颜色',
backColor: '背景颜色'
}
},

opts: {
colors: ['ffffff', '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646', 'ffff00', 'f2f2f2', '7f7f7f', 'ddd9c3', 'c6d9f0', 'dbe5f1', 'f2dcdb', 'ebf1dd', 'e5e0ec', 'dbeef3', 'fdeada', 'fff2ca', 'd8d8d8', '595959', 'c4bd97', '8db3e2', 'b8cce4', 'e5b9b7', 'd7e3bc', 'ccc1d9', 'b7dde8', 'fbd5b5', 'ffe694', 'bfbfbf', '3f3f3f', '938953', '548dd4', '95b3d7', 'd99694', 'c3d69b', 'b2a2c7', 'b7dde8', 'fac08f', 'f2c314', 'a5a5a5', '262626', '494429', '17365d', '366092', '953734', '76923c', '5f497a', '92cddc', 'e36c09', 'c09100', '7f7f7f', '0c0c0c', '1d1b10', '0f243e', '244061', '632423', '4f6128', '3f3151', '31859b', '974806', '7f6000']
}
});
// jshint camelcase:true
Expand All @@ -58,13 +54,13 @@
}
}

function colorTagHandler(element) {
function colorTagHandler(element, trumbowyg) {
var tags = [];

// background color
if (element.style.backgroundColor !== '') {
var backColor = colorToHex(element.style.backgroundColor);
if ($.trumbowyg.opts.colors.indexOf(backColor) >= 0) {
if (trumbowyg.o.plugins.colors.colorList.indexOf(backColor) >= 0) {
tags.push('backColor' + backColor);
} else {
tags.push('backColorFree');
Expand All @@ -79,7 +75,7 @@
foreColor = colorToHex(element.getAttribute('color'));
}
if (foreColor) {
if ($.trumbowyg.opts.colors.indexOf(foreColor) >= 0) {
if (trumbowyg.o.plugins.colors.colorList.indexOf(foreColor) >= 0) {
tags.push('foreColor' + foreColor);
} else {
tags.push('foreColorFree');
Expand All @@ -89,67 +85,78 @@
return tags;
}

var defaultOptions = {
colorList: ['ffffff', '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646', 'ffff00', 'f2f2f2', '7f7f7f', 'ddd9c3', 'c6d9f0', 'dbe5f1', 'f2dcdb', 'ebf1dd', 'e5e0ec', 'dbeef3', 'fdeada', 'fff2ca', 'd8d8d8', '595959', 'c4bd97', '8db3e2', 'b8cce4', 'e5b9b7', 'd7e3bc', 'ccc1d9', 'b7dde8', 'fbd5b5', 'ffe694', 'bfbfbf', '3f3f3f', '938953', '548dd4', '95b3d7', 'd99694', 'c3d69b', 'b2a2c7', 'b7dde8', 'fac08f', 'f2c314', 'a5a5a5', '262626', '494429', '17365d', '366092', '953734', '76923c', '5f497a', '92cddc', 'e36c09', 'c09100', '7f7f7f', '0c0c0c', '1d1b10', '0f243e', '244061', '632423', '4f6128', '3f3151', '31859b', '974806', '7f6000']
};

// Add all colors in two dropdowns
$.extend(true, $.trumbowyg, {
opts: {
btnsDef: {
foreColor: {
dropdown: buildDropdown('foreColor')
plugins: {
color: {
init: function (trumbowyg) {
trumbowyg.o.plugins.colors = $.extend(true, {}, defaultOptions, trumbowyg.o.plugins.colors || {});
var foreColorBtnDef = {
dropdown: buildDropdown('foreColor', trumbowyg)
},
backColorBtnDef = {
dropdown: buildDropdown('backColor', trumbowyg)
};

trumbowyg.addBtnDef('foreColor', foreColorBtnDef);
trumbowyg.addBtnDef('backColor', backColorBtnDef);
},
backColor: {
dropdown: buildDropdown('backColor')
}
},
pluginTagHandlers: {
colorTagHandler: colorTagHandler
tagHandler: colorTagHandler
}
}
});

function buildDropdown(fn) {
function buildDropdown(fn, trumbowyg) {
var dropdown = [];

$.each($.trumbowyg.opts.colors, function (i, color) {
var btn = fn + color;
$.trumbowyg.opts.btnsDef[btn] = {
fn: fn,
forceCss: true,
param: '#' + color,
style: 'background-color: #' + color + ';'
};
$.each(trumbowyg.o.plugins.colors.colorList, function (i, color) {
var btn = fn + color,
btnDef = {
fn: fn,
forceCss: true,
param: '#' + color,
style: 'background-color: #' + color + ';'
};
trumbowyg.addBtnDef(btn, btnDef);
dropdown.push(btn);
});

var removeColorButtonName = fn + 'Remove';
$.trumbowyg.opts.btnsDef[removeColorButtonName] = {
fn: 'removeFormat',
param: fn,
style: 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkQAAfEJMRmwBYhoGBYQtMBYoAADziAp0jtJTgAAAAAElFTkSuQmCC);'
};
var removeColorButtonName = fn + 'Remove',
removeColorBtnDef = {
fn: 'removeFormat',
param: fn,
style: 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkQAAfEJMRmwBYhoGBYQtMBYoAADziAp0jtJTgAAAAAElFTkSuQmCC);'
};
trumbowyg.addBtnDef(removeColorButtonName, removeColorBtnDef);
dropdown.push(removeColorButtonName);

// add free color btn
var freeColorButtonName = fn + 'Free';
$.trumbowyg.opts.btnsDef[freeColorButtonName] = {
fn: function (params, tbw) {
tbw.openModalInsert(tbw.lang[fn],
{
color: {
label: fn,
value: '#FFFFFF'
var freeColorButtonName = fn + 'Free',
freeColorBtnDef = {
fn: function (params, tbw) {
tbw.openModalInsert(tbw.lang[fn],
{
color: {
label: fn,
value: '#FFFFFF'
}
},
// callback
function (values) {
tbw.execCmd(fn, values.color);
return true;
}
},
// callback
function (values) {
tbw.execCmd(fn, values.color);
return true;
}
);
},
text: '#',
// style adjust for displaying the text
style: 'text-indent: 0;line-height: 20px;padding: 0 5px;'
};
);
},
text: '#',
// style adjust for displaying the text
style: 'text-indent: 0;line-height: 20px;padding: 0 5px;'
};
trumbowyg.addBtnDef(freeColorButtonName, freeColorBtnDef);
dropdown.push(freeColorButtonName);

return dropdown;
Expand Down
Loading

0 comments on commit 2b7e2b5

Please sign in to comment.