Skip to content

Instantly share code, notes, and snippets.

@Neener54
Created April 2, 2012 17:06
Show Gist options
  • Save Neener54/2285181 to your computer and use it in GitHub Desktop.
Save Neener54/2285181 to your computer and use it in GitHub Desktop.
handlebars template
wysiwyg = {
wysihtml5 : function(){
// Global array of editor instances, necessary for being able to do custom functions later
editors = new Array();
$('textarea.wysihtml5').each(function(){
var currTextArea = $(this);
var currId = currTextArea.attr('id');
wysiwyg.toolbar(currTextArea);
editors[currId] = new wysihtml5.Editor(currId.toString(), {
name: 'wysihtml5_ed_'+currId,
// Whether the editor should look like the textarea (by adopting styles)
style: true,
// Whether urls, entered by the user should automatically become clickable-links
autoLink: true,
// Id of the toolbar element, pass falsey value if you don't want any toolbar logic
toolbar: "toolbar_"+currId,
// Object which includes parser rules (set this to examples/rules/spec.json or your own spec, otherwise only span tags are allowed!)
parserRules: wysihtml5ParserRules,
// Class name which should be set on the contentEditable element in the created sandbox iframe, can be styled via the 'stylesheets' option
composerClassName: "wysihtml5-editor",
// Array (or single string) of stylesheet urls to be loaded in the editor's iframe
stylesheets: ['/assets/wysihtml5.css'],
// Class name to add to the body when the wysihtml5 editor is supported
bodyClassName: "wysihtml5-supported",
// Whether the composer should allow the user to manually resize images, tables etc.
allowObjectResizing: true,
// Whether the rich text editor should be rendered on touch devices (wysihtml5 >= 0.3.0 comes with basic support for iOS 5)
supportTouchDevices: true
});
console.log(editors[currId]);
});
$('a.btnImageSelector').on('click', function(){
console.log('btn clicked');
var seltarget = $(this).data('origin');
var seltype = $(this).data('type');
newImageSelector.popup({target: seltarget, type: seltype});
});
},
toolbar : function(el){
var template = HandlebarsTemplates['shared/editor_toolbar'];
var id = {id : el.attr('id')};
var html = template(id);
el.before(html);
}
};
<div id="toolbar_{{id}}" style="display: none;">
<div class="btn-group">
<a data-wysihtml5-command="bold" title="CTRL+B" class="btn"><i class="icon-bold"></i></a>
<a data-wysihtml5-command="italic" title="CTRL+I" class="btn"><i class="icon-italic"></i></a>
<a data-wysihtml5-command="underline" title="CTRL+U" class="btn">U</a>
<a data-wysihtml5-command="createLink" class="btn" title="link"><i class="icon-share"></i></a>
<a class="btn btnImageSelector" title="image" data-origin="{{id}}" data-toggle="modal" data-target="#image_selector_{{id}}" data-type="textarea"><i class="icon-picture"></i></a>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="btn" title="heading 1">h1</a>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2"class="btn" title="heading 2">h2</a>
<a data-wysihtml5-command="insertUnorderedList" class="btn" title="Unordered List"><i class="icon-th-list"></i></a>
<a data-wysihtml5-command="insertOrderedList" class="btn" title="Ordered List"><i class="icon-list"></i></a>
<a data-wysihtml5-command="insertSpeech" class="btn" title="Speech - for supported browsers"><i class="icon-volume-up"></i></a>
<a data-wysihtml5-action="change_view" class="btn" title="Source HTML"><i class="icon-edit"></i> Source</a>
</div>
<div data-wysihtml5-dialog="createLink" style="display: none;">
<label>
Link:
<input data-wysihtml5-dialog-field="href" value="http://" class="text">
</label>
<a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment