Created
September 30, 2016 10:35
-
-
Save dalpo/735fb396d6dcb951cfb5268e3de081b2 to your computer and use it in GitHub Desktop.
Bootstrap wysihtml5 text alignment implementation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function($, wysi) { | |
"use strict"; | |
var tpl = { | |
"font-styles": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li class='dropdown'>" + | |
"<a class='btn btn-default dropdown-toggle" + size + "' data-toggle='dropdown' href='#' title='" + locale.font_styles.title + "'>" + | |
"<i class='glyphicon glyphicon-font'></i> <span class='current-font'>" + locale.font_styles.normal + "</span> <b class='caret'></b>" + | |
"</a>" + | |
"<ul class='dropdown-menu'>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div' tabindex='-1' role='menuitem'>" + locale.font_styles.normal + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1' tabindex='-1' role='menuitem'>" + locale.font_styles.h1 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2' tabindex='-1' role='menuitem'>" + locale.font_styles.h2 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3' tabindex='-1' role='menuitem'>" + locale.font_styles.h3 + "</a></li>" + | |
"</ul>" + | |
"</li>"; | |
}, | |
"emphasis": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='bold' title='CTRL+B' tabindex='-1'><i class='fa fa-bold' title='" + locale.emphasis.bold + "'></i></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='italic' title='CTRL+I' tabindex='-1'><i class='fa fa-italic' title='" + locale.emphasis.italic + "'></i></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='underline' title='CTRL+U' tabindex='-1'><i class='fa fa-underline' title='" + locale.emphasis.underline + "'></i></a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"textalign": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='justifyLeft' tabindex='-1'><span class='glyphicon glyphicon-align-left'></span></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='justifyCenter' tabindex='-1'><span class='glyphicon glyphicon-align-center'></span></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='justifyRight' tabindex='-1'><span class='glyphicon glyphicon-align-right'></span></a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"lists": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "' tabindex='-1'><i class='glyphicon glyphicon-list'></i></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "' tabindex='-1'><i class='glyphicon glyphicon-th-list'></i></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "' tabindex='-1'><i class='glyphicon glyphicon-indent-left'></i></a>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='glyphicon glyphicon-indent-right'></i></a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"link": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='bootstrap-wysihtml5-insert-link-modal modal fade' tabindex='-1' role='dialog' aria-hidden='true'>" + | |
"<div class='modal-dialog'>" + | |
"<div class='modal-content'>" + | |
"<div class='modal-header'>" + | |
"<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" + | |
"<h3 class='modal-title'>" + locale.link.insert + "</h3>" + | |
"</div>" + | |
"<div class='modal-body'>" + | |
"<input value='http://' class='bootstrap-wysihtml5-insert-link-url form-control input-lg'>" + | |
"</div>" + | |
"<div class='modal-footer'>" + | |
"<a href='#' class='btn btn-default' data-dismiss='modal'>" + locale.link.cancel + "</a>" + | |
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" + | |
"</div>" + | |
"</div>" + | |
"</div>" + | |
"</div>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='createLink' title='" + locale.link.insert + "' tabindex='-1'><i class='glyphicon glyphicon-share'></i></a>" + | |
"</li>"; | |
}, | |
"image": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='bootstrap-wysihtml5-insert-image-modal modal fade' tabindex='-1' role='dialog' aria-hidden='true'>" + | |
"<div class='modal-dialog'>" + | |
"<div class='modal-content'>" + | |
"<div class='modal-header'>" + | |
"<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" + | |
"<h3 class='modal-title'>" + locale.image.insert + "</h3>" + | |
"</div>" + | |
"<div class='modal-body'>" + | |
"<input value='http://' class='bootstrap-wysihtml5-insert-image-url form-control input-lg'>" + | |
"</div>" + | |
"<div class='modal-footer'>" + | |
"<a href='#' class='btn btn-default ' data-dismiss='modal'>" + locale.image.cancel + "</a>" + | |
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" + | |
"</div>" + | |
"</div>" + | |
"</div>" + | |
"</div>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='glyphicon glyphicon-picture'></i></a>" + | |
"</li>"; | |
}, | |
"html": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn btn-default " + size + "' data-wysihtml5-action='change_view' title='" + locale.html.edit + "' tabindex='-1'><i class='glyphicon glyphicon-pencil'></i></a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"color": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li class='dropdown'>" + | |
"<a class='btn btn-default dropdown-toggle" + size + "' data-toggle='dropdown' href='#' tabindex='-1' title='" + locale.colours.title + "'>" + | |
"<span class='current-color'>" + locale.colours.black + "</span> <b class='caret'></b>" + | |
"</a>" + | |
"<ul class='dropdown-menu'>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='black'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='black' role='menuitem'>" + locale.colours.black + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='silver'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='silver' role='menuitem'>" + locale.colours.silver + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='gray'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='gray' role='menuitem'>" + locale.colours.gray + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='maroon'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='maroon' role='menuitem'>" + locale.colours.maroon + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='red'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red' role='menuitem'>" + locale.colours.red + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='purple'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='purple' role='menuitem'>" + locale.colours.purple + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='green'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green' role='menuitem'>" + locale.colours.green + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='olive'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='olive' role='menuitem'>" + locale.colours.olive + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='navy'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='navy' role='menuitem'>" + locale.colours.navy + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='blue'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue' role='menuitem'>" + locale.colours.blue + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='orange'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='orange' role='menuitem'>" + locale.colours.orange + "</a></li>" + | |
"</ul>" + | |
"</li>"; | |
} | |
}; | |
var templates = function(key, locale, options) { | |
return tpl[key](locale, options); | |
}; | |
var Wysihtml5 = function(el, options) { | |
this.el = el; | |
var toolbarOpts = options || defaultOptions; | |
for(var t in toolbarOpts.customTemplates) { | |
tpl[t] = toolbarOpts.customTemplates[t]; | |
} | |
this.toolbar = this.createToolbar(el, toolbarOpts); | |
this.editor = this.createEditor(options); | |
window.editor = this.editor; | |
$('iframe.wysihtml5-sandbox').each(function(i, el){ | |
$(el.contentWindow).off('focus.wysihtml5').on({ | |
'focus.wysihtml5' : function(){ | |
$('li.dropdown').removeClass('open'); | |
} | |
}); | |
}); | |
}; | |
Wysihtml5.prototype = { | |
constructor: Wysihtml5, | |
createEditor: function(options) { | |
options = options || {}; | |
// Add the toolbar to a clone of the options object so multiple instances | |
// of the WYISYWG don't break because "toolbar" is already defined | |
options = $.extend(true, {}, options); | |
options.toolbar = this.toolbar[0]; | |
var editor = new wysi.Editor(this.el[0], options); | |
if(options && options.events) { | |
for(var eventName in options.events) { | |
editor.on(eventName, options.events[eventName]); | |
} | |
} | |
return editor; | |
}, | |
createToolbar: function(el, options) { | |
var self = this; | |
var toolbar = $("<ul/>", { | |
'class' : "wysihtml5-toolbar", | |
'style': "display:none" | |
}); | |
var culture = options.locale || defaultOptions.locale || "en"; | |
console.log('//////////////////////////'); | |
console.dir(defaultOptions); | |
console.dir(options); | |
for(var key in defaultOptions) { | |
var value = false; | |
if(options[key] !== undefined) { | |
if(options[key] === true) { | |
value = true; | |
} | |
} else { | |
value = defaultOptions[key]; | |
} | |
if(value === true) { | |
toolbar.append(templates(key, locale[culture], options)); | |
if(key === "html") { | |
this.initHtml(toolbar); | |
} | |
if(key === "link") { | |
this.initInsertLink(toolbar); | |
} | |
if(key === "image") { | |
this.initInsertImage(toolbar); | |
} | |
if(key == "customCommand") { | |
this.initCustomCommand(toolbar, options.customCommandCallback); | |
} | |
} | |
} | |
console.dir(options.toolbar); | |
if(options.toolbar) { | |
for(key in options.toolbar) { | |
toolbar.append(options.toolbar[key]); | |
} | |
} | |
toolbar.find("a[data-wysihtml5-command='formatBlock']").click(function(e) { | |
var target = e.target || e.srcElement; | |
var el = $(target); | |
self.toolbar.find('.current-font').text(el.html()); | |
}); | |
toolbar.find("a[data-wysihtml5-command='foreColor']").click(function(e) { | |
var target = e.target || e.srcElement; | |
var el = $(target); | |
self.toolbar.find('.current-color').text(el.html()); | |
}); | |
this.el.before(toolbar); | |
return toolbar; | |
}, | |
initHtml: function(toolbar) { | |
var changeViewSelector = "a[data-wysihtml5-action='change_view']"; | |
toolbar.find(changeViewSelector).click(function(e) { | |
toolbar.find('a.btn').not(changeViewSelector).toggleClass('disabled'); | |
}); | |
}, | |
initInsertImage: function(toolbar) { | |
var self = this; | |
var insertImageModal = toolbar.find('.bootstrap-wysihtml5-insert-image-modal'); | |
var urlInput = insertImageModal.find('.bootstrap-wysihtml5-insert-image-url'); | |
var insertButton = insertImageModal.find('a.btn-primary'); | |
var initialValue = urlInput.val(); | |
var caretBookmark; | |
var insertImage = function() { | |
var url = urlInput.val(); | |
urlInput.val(initialValue); | |
self.editor.currentView.element.focus(); | |
if (caretBookmark) { | |
self.editor.composer.selection.setBookmark(caretBookmark); | |
caretBookmark = null; | |
} | |
self.editor.composer.commands.exec("insertImage", url); | |
}; | |
urlInput.keypress(function(e) { | |
if(e.which == 13) { | |
insertImage(); | |
insertImageModal.modal('hide'); | |
} | |
}); | |
insertButton.click(insertImage); | |
insertImageModal.on('shown', function() { | |
urlInput.focus(); | |
}); | |
insertImageModal.on('hide', function() { | |
self.editor.currentView.element.focus(); | |
}); | |
toolbar.find('a[data-wysihtml5-command=insertImage]').click(function() { | |
var activeButton = $(this).hasClass("wysihtml5-command-active"); | |
if (!activeButton) { | |
self.editor.currentView.element.focus(false); | |
caretBookmark = self.editor.composer.selection.getBookmark(); | |
insertImageModal.appendTo('body').modal('show'); | |
insertImageModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) { | |
e.stopPropagation(); | |
}); | |
return false; | |
} | |
else { | |
return true; | |
} | |
}); | |
}, | |
initCustomCommand: function(toolbar, callback) { | |
var self = this; | |
toolbar.find('a[data-wysihtml5-command=customCommand]').click(function() { | |
var activeButton = $(this).hasClass("wysihtml5-command-active"); | |
if (!activeButton) { | |
callback(self.editor); | |
return false; | |
} | |
else { | |
return true; | |
} | |
}); | |
}, | |
initInsertLink: function(toolbar) { | |
var self = this; | |
var insertLinkModal = toolbar.find('.bootstrap-wysihtml5-insert-link-modal'); | |
var urlInput = insertLinkModal.find('.bootstrap-wysihtml5-insert-link-url'); | |
var insertButton = insertLinkModal.find('a.btn-primary'); | |
var initialValue = urlInput.val(); | |
var caretBookmark; | |
var insertLink = function() { | |
var url = urlInput.val(); | |
urlInput.val(initialValue); | |
self.editor.currentView.element.focus(); | |
if (caretBookmark) { | |
self.editor.composer.selection.setBookmark(caretBookmark); | |
caretBookmark = null; | |
} | |
self.editor.composer.commands.exec("createLink", { | |
href: url, | |
target: "_blank", | |
rel: "nofollow" | |
}); | |
}; | |
var pressedEnter = false; | |
urlInput.keypress(function(e) { | |
if(e.which == 13) { | |
insertLink(); | |
insertLinkModal.modal('hide'); | |
} | |
}); | |
insertButton.click(insertLink); | |
insertLinkModal.on('shown', function() { | |
urlInput.focus(); | |
}); | |
insertLinkModal.on('hide', function() { | |
self.editor.currentView.element.focus(); | |
}); | |
toolbar.find('a[data-wysihtml5-command=createLink]').click(function() { | |
var activeButton = $(this).hasClass("wysihtml5-command-active"); | |
if (!activeButton) { | |
self.editor.currentView.element.focus(false); | |
caretBookmark = self.editor.composer.selection.getBookmark(); | |
insertLinkModal.appendTo('body').modal('show'); | |
insertLinkModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) { | |
e.stopPropagation(); | |
}); | |
return false; | |
} | |
else { | |
return true; | |
} | |
}); | |
} | |
}; | |
// these define our public api | |
var methods = { | |
resetDefaults: function() { | |
$.fn.wysihtml5.defaultOptions = $.extend(true, {}, $.fn.wysihtml5.defaultOptionsCache); | |
}, | |
bypassDefaults: function(options) { | |
return this.each(function () { | |
var $this = $(this); | |
$this.data('wysihtml5', new Wysihtml5($this, options)); | |
}); | |
}, | |
shallowExtend: function (options) { | |
var settings = $.extend({}, $.fn.wysihtml5.defaultOptions, options || {}); | |
var that = this; | |
return methods.bypassDefaults.apply(that, [settings]); | |
}, | |
deepExtend: function(options) { | |
var settings = $.extend(true, {}, $.fn.wysihtml5.defaultOptions, options || {}); | |
var that = this; | |
return methods.bypassDefaults.apply(that, [settings]); | |
}, | |
init: function(options) { | |
var that = this; | |
return methods.shallowExtend.apply(that, [options]); | |
} | |
}; | |
$.fn.wysihtml5 = function ( method ) { | |
if ( methods[method] ) { | |
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); | |
} else if ( typeof method === 'object' || ! method ) { | |
return methods.init.apply( this, arguments ); | |
} else { | |
$.error( 'Method ' + method + ' does not exist on jQuery.wysihtml5' ); | |
} | |
}; | |
$.fn.wysihtml5.Constructor = Wysihtml5; | |
var defaultOptions = $.fn.wysihtml5.defaultOptions = { | |
"font-styles": true, | |
"color": false, | |
"emphasis": true, | |
"textalign": true, | |
"lists": true, | |
"html": false, | |
"link": true, | |
"image": true, | |
customCommand: false, | |
events: {}, | |
parserRules: { | |
classes: { | |
// (path_to_project/lib/css/wysiwyg-color.css) | |
"wysiwyg-color-silver" : 1, | |
"wysiwyg-color-gray" : 1, | |
"wysiwyg-color-white" : 1, | |
"wysiwyg-color-maroon" : 1, | |
"wysiwyg-color-red" : 1, | |
"wysiwyg-color-purple" : 1, | |
"wysiwyg-color-fuchsia" : 1, | |
"wysiwyg-color-green" : 1, | |
"wysiwyg-color-lime" : 1, | |
"wysiwyg-color-olive" : 1, | |
"wysiwyg-color-yellow" : 1, | |
"wysiwyg-color-navy" : 1, | |
"wysiwyg-color-blue" : 1, | |
"wysiwyg-color-teal" : 1, | |
"wysiwyg-color-aqua" : 1, | |
"wysiwyg-color-orange" : 1, | |
"wysiwyg-text-align-left": 1, | |
"wysiwyg-text-align-center": 1, | |
"wysiwyg-text-align-right": 1, | |
}, | |
tags: { | |
"b": {}, | |
"i": {}, | |
"br": {}, | |
"ol": {}, | |
"ul": {}, | |
"li": {}, | |
"h1": {}, | |
"h2": {}, | |
"h3": {}, | |
"blockquote": {}, | |
"u": 1, | |
"img": { | |
"check_attributes": { | |
"width": "numbers", | |
"alt": "alt", | |
"src": "url", | |
"height": "numbers" | |
} | |
}, | |
"a": { | |
set_attributes: { | |
target: "_blank", | |
rel: "nofollow" | |
}, | |
check_attributes: { | |
href: "url" // important to avoid XSS | |
} | |
}, | |
"span": 1, | |
"div": 1, | |
// to allow save and edit files with code tag hacks | |
"code": 1, | |
"pre": 1 | |
} | |
}, | |
stylesheets: ["./lib/css/wysiwyg-color.css"], // (path_to_project/lib/css/wysiwyg-color.css) | |
locale: "en" | |
}; | |
if (typeof $.fn.wysihtml5.defaultOptionsCache === 'undefined') { | |
$.fn.wysihtml5.defaultOptionsCache = $.extend(true, {}, $.fn.wysihtml5.defaultOptions); | |
} | |
var locale = $.fn.wysihtml5.locale = { | |
en: { | |
font_styles: { | |
title: "Font style", | |
normal: "Normal text", | |
h1: "Heading 1", | |
h2: "Heading 2", | |
h3: "Heading 3" | |
}, | |
emphasis: { | |
bold: "Bold", | |
italic: "Italic", | |
underline: "Underline" | |
}, | |
lists: { | |
unordered: "Unordered list", | |
ordered: "Ordered list", | |
outdent: "Outdent", | |
indent: "Indent" | |
}, | |
link: { | |
insert: "Insert link", | |
cancel: "Cancel" | |
}, | |
image: { | |
insert: "Insert image", | |
cancel: "Cancel" | |
}, | |
html: { | |
edit: "Edit HTML" | |
}, | |
colours: { | |
title: "Text color", | |
black: "Black", | |
silver: "Silver", | |
gray: "Grey", | |
maroon: "Maroon", | |
red: "Red", | |
purple: "Purple", | |
green: "Green", | |
olive: "Olive", | |
navy: "Navy", | |
blue: "Blue", | |
orange: "Orange" | |
} | |
} | |
}; | |
}(window.jQuery, window.wysihtml5); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.wysiwyg-text-align-left | |
text-align: left | |
.wysiwyg-text-align-center | |
text-align: center | |
.wysiwyg-text-align-right | |
text-align: right |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment