Skip to content

Commit

Permalink
Revert " * ability to customize the style menu"
Browse files Browse the repository at this point in the history
 * removing custom style menu code from master
This reverts commit 02c8123.
  • Loading branch information
bunnymatic committed Oct 23, 2012
1 parent fbec9c6 commit ea8e44e
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 81 deletions.
25 changes: 0 additions & 25 deletions readme.textile
Original file line number Diff line number Diff line change
Expand Up @@ -135,31 +135,6 @@ $(this).wysihtml5('resetDefaults')

Operations on the defaults are not thread-safe; if you're going to change the defaults, you probably want to do it only once, after you load the bootstrap-wysihtml plugin and before you start instantiating your editors.

h3. Custom styles menu

You can add custom styles (which wrap text with spans that have a class) using adding customStyles to your options.

<pre>
$(this).wysihtml5({customStyles : { my_style: 'My Style' }})
</pre>

will create a new item in the styles dropdown menu which reads "MyStyle". If you highlight text and choose this style, the text will be wrapped with

<pre>
<span class="my_style"> the selected text </span>
</pre>

These custom styles will also be automatically added to the safe-class list in the parser.

You can also remove default styles from this menu by including an array of styles you'd like to not be included. The default styles are 'h1','h2','h3', and 'normal'.

<pre>
$(this).wysihtml5({removeStyles : ['h2', 'h3']})
</pre>

will give you a styles menu that only includes 'h1' and 'normal'.


h2. The underlying wysihtml5 object

You can access the "wysihtml5 editor object":https://github.com/xing/wysihtml5 like this:
Expand Down
45 changes: 14 additions & 31 deletions src/bootstrap-wysihtml5.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,19 @@
var templates = function(key, locale) {

var tpl = {
"font-styles": (function() {
var tmpl = "<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'>";
var stylesToRemove = locale.font_styles.remove || [];
$.each(['normal','h1','h2','h3'], function(idx, key) {
if (stylesToRemove.indexOf(key) < 0) {
tmpl += "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='" + key + "'>" + locale.font_styles[key] + "</a></li>";
}
});
locale.font_styles.custom = locale.font_styles.custom || [];
$.each(locale.font_styles.custom, function(style, displayName) {
tmpl += "<li><a data-wysihtml5-command='customSpan' data-wsyihtml5-command-value='" + style + "'>" + displayName + "</a></li>";
});
tmpl += "</ul>" +
"</li>";
return tmpl;
})(),
"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'>" +
Expand Down Expand Up @@ -112,13 +105,7 @@

var Wysihtml5 = function(el, options) {
this.el = el;
var toolbarOpts = options || defaultOptions
// add custom classes to the save class list */
for(var k in toolbarOpts.customStyles) {
toolbarOpts.parserRules.classes[k] = 1;
}
this.configuration = toolbarOpts;
this.toolbar = this.createToolbar(el, toolbarOpts);
this.toolbar = this.createToolbar(el, options || defaultOptions);
this.editor = this.createEditor(options);

window.editor = this.editor;
Expand Down Expand Up @@ -157,8 +144,6 @@
'style': "display:none"
});
var culture = options.locale || defaultOptions.locale || "en";
locale[culture].font_styles.custom = options.customStyles;
locale[culture].font_styles.remove = options.removeStyles;
for(var key in defaultOptions) {
var value = false;

Expand Down Expand Up @@ -363,8 +348,6 @@
"link": true,
"image": true,
events: {},
customStyles: {},
removeStyles: [],
parserRules: {
classes: {
// (path_to_project/lib/css/wysiwyg-color.css)
Expand Down
26 changes: 1 addition & 25 deletions test/editor_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,10 @@ if (wysihtml5.browser.supported()) {
getComposerElement: function() {
return this.getIframeElement().contentWindow.document.body;
},

getIframeElement: function() {
var iframes = document.querySelectorAll("iframe.wysihtml5-sandbox");
return iframes[iframes.length - 1];
},
getToolbarElement: function() {
var toolbars = document.querySelectorAll(".wysihtml5-toolbar");
return toolbars[0];
}
});

Expand Down Expand Up @@ -121,27 +118,6 @@ if (wysihtml5.browser.supported()) {
});


asyncTest("Check the toolbar and customStyles", function() {
expect(4);

this.textareaElement.className = "death-star";

var that = this;
var name = "star-wars-input";
$(this.textareaElement).wysihtml5({ html: true, customStyles: { other: 'Other Style'}, removeStyles: [ 'h1' ] });
var editor = $(this.textareaElement).data('wysihtml5').editor;
var classes = $(this.textareaElement).data('wysihtml5').configuration.parserRules.classes
ok(classes.other === 1, 'custom classes were not added to the safe parse list');
editor.observe("load", function() {
var toolbar = that.getToolbarElement();
ok($(toolbar).find('ul.dropdown-menu a[data-wysihtml5-command=formatBlock]').length === 3, "toolbar includes all default styles that were not removed witgh removeStyles option");
ok($(toolbar).find('ul.dropdown-menu a[data-wysihtml5-command=customSpan]').length === 1 , "toolbar includes the custom styles");
ok(/Other Style/.test($(toolbar).find('ul.dropdown-menu a[data-wysihtml5-command=customSpan]').text()), "toolbar custom style title is not correct");
start();
});
});


asyncTest("Check textarea with box-sizing: border-box;", function() {
expect(1);

Expand Down

0 comments on commit ea8e44e

Please sign in to comment.