Oops, you need to build the package before running this example. It's easy: just run rake
in the project's directory.
This is a more advanced example that extends the built-in toolbar class. The code is a bit more verbose, however you have full control of the html.
document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('content');
var boldButton = $$('.toolbar .bold').first();
boldButton.on('click', function(event) {
editor.boldSelection();
Event.stop(event);
});
editor.on('wysihat:cursormove', function(event) {
if (editor.boldSelected())
boldButton.addClassName('selected')
else
boldButton.removeClassName('selected');
});
var underlineButton = $$('.toolbar .underline').first();
underlineButton.on('click', function(event) {
editor.underlineSelection();
Event.stop(event);
});
editor.on('wysihat:cursormove', function(event) {
if (editor.underlineSelected())
underlineButton.addClassName('selected')
else
underlineButton.removeClassName('selected');
});
var italicButton = $$('.toolbar .italic').first();
italicButton.on('click', function(event) {
editor.italicSelection();
Event.stop(event);
});
editor.on('wysihat:cursormove', function(event) {
if (editor.italicSelected())
italicButton.addClassName('selected')
else
italicButton.removeClassName('selected');
});
});