Permalink
Browse files

* move template definitions for toolbar to be functions

 * allow template definitions to be overridden based on input values
 * add tests
 * update readme
  • Loading branch information...
1 parent ea8e44e commit 6037a0e50963bb79b2770dad02731c43b2e6e3ad @bunnymatic bunnymatic committed Oct 23, 2012
Showing with 173 additions and 99 deletions.
  1. +35 −0 readme.textile
  2. +110 −99 src/bootstrap-wysihtml5.js
  3. +28 −0 test/editor_test.js
View
@@ -68,6 +68,41 @@ $('#some-textarea').wysihtml5({
});
</pre>
+h3. Custom Templates for buttons
+
+To define custom templates for buttons, you can submit a customTemplates hash with the new definitions. Each entry should be a function which expects 'locale' to manage the translations.
+
+For example, the default template used for the editHtml mode button looks like this
+
+<pre>
+<li>
+ <div class='btn-group'>
+ <a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'><i class='icon-pencil'></i></a>"
+ </div>
+</li>
+</pre>
+
+You can change it to not use the pencil icon (for example) by defining the custom template like this:
+<pre>
+ var myCustomTemplates = {
+ html : function(locale) {
+ return "<li>" +
+ "<div class='btn-group'>" +
+ "<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'>HTML</a>" +
+ "</div>" +
+ "</li>";
+ }
+ }
+
+ // pass in your custom templates on init
+ $('#some-textarea').wysihtml5({
+ customTemplates: myCustomTemplates
+ });
+</pre>
+
+This will override only the toolbar template for html, and all others will use the default.
+
+
h3. Stylesheets
It is possible to supply a number of stylesheets for inclusion in the editor `<iframe>`:
View
@@ -1,111 +1,122 @@
!function($, wysi) {
"use strict";
- var templates = function(key, locale) {
+ var tpl = {
+ "font-styles": function(locale) {
+ return "<li class='dropdown'>" +
+ "<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>" +
+ "<i class='icon-font'></i>&nbsp;<span class='current-font'>" + locale.font_styles.normal + "</span>&nbsp;<b class='caret'></b>" +
+ "</a>" +
+ "<ul class='dropdown-menu'>" +
+ "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div'>" + locale.font_styles.normal + "</a></li>" +
+ "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1'>" + locale.font_styles.h1 + "</a></li>" +
+ "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2'>" + locale.font_styles.h2 + "</a></li>" +
+ "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3'>" + locale.font_styles.h3 + "</a></li>" +
+ "</ul>" +
+ "</li>";
+ },
- var tpl = {
- "font-styles":
- "<li class='dropdown'>" +
- "<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>" +
- "<i class='icon-font'></i>&nbsp;<span class='current-font'>" + locale.font_styles.normal + "</span>&nbsp;<b class='caret'></b>" +
- "</a>" +
- "<ul class='dropdown-menu'>" +
- "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div'>" + locale.font_styles.normal + "</a></li>" +
- "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1'>" + locale.font_styles.h1 + "</a></li>" +
- "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2'>" + locale.font_styles.h2 + "</a></li>" +
- "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3'>" + locale.font_styles.h3 + "</a></li>" +
- "</ul>" +
- "</li>",
-
- "emphasis":
- "<li>" +
- "<div class='btn-group'>" +
- "<a class='btn' data-wysihtml5-command='bold' title='CTRL+B'>" + locale.emphasis.bold + "</a>" +
- "<a class='btn' data-wysihtml5-command='italic' title='CTRL+I'>" + locale.emphasis.italic + "</a>" +
- "<a class='btn' data-wysihtml5-command='underline' title='CTRL+U'>" + locale.emphasis.underline + "</a>" +
- "</div>" +
- "</li>",
-
- "lists":
- "<li>" +
- "<div class='btn-group'>" +
- "<a class='btn' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "'><i class='icon-list'></i></a>" +
- "<a class='btn' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "'><i class='icon-th-list'></i></a>" +
- "<a class='btn' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "'><i class='icon-indent-right'></i></a>" +
- "<a class='btn' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "'><i class='icon-indent-left'></i></a>" +
- "</div>" +
- "</li>",
-
- "link":
- "<li>" +
- "<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" +
- "<div class='modal-header'>" +
- "<a class='close' data-dismiss='modal'>&times;</a>" +
- "<h3>" + locale.link.insert + "</h3>" +
- "</div>" +
- "<div class='modal-body'>" +
- "<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" +
- "</div>" +
- "<div class='modal-footer'>" +
- "<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
- "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
- "</div>" +
- "</div>" +
- "<a class='btn' data-wysihtml5-command='createLink' title='" + locale.link.insert + "'><i class='icon-share'></i></a>" +
- "</li>",
-
- "image":
- "<li>" +
- "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
- "<div class='modal-header'>" +
- "<a class='close' data-dismiss='modal'>&times;</a>" +
- "<h3>" + locale.image.insert + "</h3>" +
- "</div>" +
- "<div class='modal-body'>" +
- "<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" +
- "</div>" +
- "<div class='modal-footer'>" +
- "<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
- "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
- "</div>" +
- "</div>" +
- "<a class='btn' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "'><i class='icon-picture'></i></a>" +
- "</li>",
-
- "html":
- "<li>" +
- "<div class='btn-group'>" +
- "<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'><i class='icon-pencil'></i></a>" +
- "</div>" +
- "</li>",
-
- "color":
- "<li class='dropdown'>" +
- "<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>" +
- "<span class='current-color'>" + locale.colours.black + "</span>&nbsp;<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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + locale.colours.orange + "</a></li>" +
- "</ul>" +
- "</li>"
- };
- return tpl[key];
+ "emphasis": function(locale) {
+ return "<li>" +
+ "<div class='btn-group'>" +
+ "<a class='btn' data-wysihtml5-command='bold' title='CTRL+B'>" + locale.emphasis.bold + "</a>" +
+ "<a class='btn' data-wysihtml5-command='italic' title='CTRL+I'>" + locale.emphasis.italic + "</a>" +
+ "<a class='btn' data-wysihtml5-command='underline' title='CTRL+U'>" + locale.emphasis.underline + "</a>" +
+ "</div>" +
+ "</li>";
+ },
+
+ "lists": function(locale) {
+ return "<li>" +
+ "<div class='btn-group'>" +
+ "<a class='btn' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "'><i class='icon-list'></i></a>" +
+ "<a class='btn' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "'><i class='icon-th-list'></i></a>" +
+ "<a class='btn' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "'><i class='icon-indent-right'></i></a>" +
+ "<a class='btn' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "'><i class='icon-indent-left'></i></a>" +
+ "</div>" +
+ "</li>";
+ },
+
+ "link": function(locale) {
+ return "<li>" +
+ "<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" +
+ "<div class='modal-header'>" +
+ "<a class='close' data-dismiss='modal'>&times;</a>" +
+ "<h3>" + locale.link.insert + "</h3>" +
+ "</div>" +
+ "<div class='modal-body'>" +
+ "<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" +
+ "</div>" +
+ "<div class='modal-footer'>" +
+ "<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
+ "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
+ "</div>" +
+ "</div>" +
+ "<a class='btn' data-wysihtml5-command='createLink' title='" + locale.link.insert + "'><i class='icon-share'></i></a>" +
+ "</li>";
+ },
+
+ "image": function(locale) {
+ return "<li>" +
+ "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
+ "<div class='modal-header'>" +
+ "<a class='close' data-dismiss='modal'>&times;</a>" +
+ "<h3>" + locale.image.insert + "</h3>" +
+ "</div>" +
+ "<div class='modal-body'>" +
+ "<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" +
+ "</div>" +
+ "<div class='modal-footer'>" +
+ "<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
+ "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
+ "</div>" +
+ "</div>" +
+ "<a class='btn' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "'><i class='icon-picture'></i></a>" +
+ "</li>";
+ },
+
+ "html": function(locale) {
+ return "<li>" +
+ "<div class='btn-group'>" +
+ "<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'><i class='icon-pencil'></i></a>" +
+ "</div>" +
+ "</li>";
+ },
+
+ "color": function(locale) {
+ return "<li class='dropdown'>" +
+ "<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>" +
+ "<span class='current-color'>" + locale.colours.black + "</span>&nbsp;<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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + 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'>" + locale.colours.orange + "</a></li>" +
+ "</ul>" +
+ "</li>";
+ }
+ };
+
+ var templates = function(key, locale) {
+ return tpl[key](locale);
};
var Wysihtml5 = function(el, options) {
this.el = el;
- this.toolbar = this.createToolbar(el, options || defaultOptions);
+ 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;
View
@@ -149,6 +149,34 @@ if (wysihtml5.browser.supported()) {
});
+ asyncTest('Check whether customTemplates work', function() {
+ expect(3);
+
+ $(this.textareaElement).wysihtml5({
+ html: true,
+ customTemplates:
+ {
+ image: function(locale) {
+ return '<div class="custom_image">' + locale.image.insert + '</div>';
+ },
+ html: function(locale) {
+ return "<li>" +
+ "<div class='btn-group html-edit-button'>" +
+ "<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'>HTML</a>" +
+ "</div>" +
+ "</li>";
+ }
+ }
+ });
+ editor.observe("load", function() {
+ equal($('form .wysihtml5-toolbar').length, 1, 'Toolbar is showing')
+ equal($('form .wysihtml5-toolbar .custom_image').length, 1, 'Custom image template works')
+ equal($('form .wysihtml5-toolbar li .html-edit-button a').html(), 'HTML', 'Custom html template works')
+ start();
+ });
+ });
+
+
asyncTest("Check whether attributes are copied", function() {
expect(1);

0 comments on commit 6037a0e

Please sign in to comment.