WYSIWYG

Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.

This examples shows how to add custom buttons and actions with the built-in toolbar class.

  document.on("dom:loaded", function() {
    var editor = WysiHat.Editor.attach('content');
    var toolbar = new WysiHat.Toolbar(editor);

    // The name will be used for the div class and the command to execute
    // The label is the text you see for the button.
    toolbar.addButton({ name: 'bold', label: "Strong" });

    // The label is the only required option. If no name is given,
    // the label will be downcased and set to the name.
    toolbar.addButton({ label: "Underline" });

    // You can override all the conventions by passing in your own
    // name, label, handler, and query options.
    toolbar.addButton({
      name: 'em',
      label: "Emphasis",
      handler: function(editor) { editor.italicSelection(); },
      query: function(editor) { return editor.italicSelected(); }
    });
  });