jhollingworth/bootstrap-wysihtml5

This repo is no longer maintained. "bootstrap3-wysiwyg":https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg is much better

h1. Overview

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of "wysihtml5":https://github.com/xing/wysihtml5 and "Twitter Bootstrap":http://twitter.github.com/bootstrap/.

h1. Examples

• "http://jhollingworth.github.com/bootstrap-wysihtml5":http://jhollingworth.github.com/bootstrap-wysihtml5/

h1. Quick Start

If you are using rails use the "bootstrap-wysihtml5-rails gem":http://rubygems.org/gems/bootstrap-wysihtml5-rails.

gem install bootstrap-wysihtml5-rails

Otherwise, download "the latest version of bootstrap-wysihtml5":https://github.com/jhollingworth/bootstrap-wysihtml5/downloads.

h2. Files to reference

h2. Usage

You can get the html generated by getting the value of the text area, e.g.

$('#some-textarea').val();

h1. Advanced

h2. Options

An options object can be passed in to .wysihtml5() to configure the editor:

$('#some-textarea').wysihtml5({someOption: 23, ...})

h3. Buttons

To override which buttons to show, set the appropriate flags:

$('#some-textarea').wysihtml5({
	"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
	"emphasis": true, //Italics, bold, etc. Default true
	"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
	"html": false, //Button which allows you to edit the generated HTML. Default false
	"link": true, //Button to insert a link. Default true
	"image": true, //Button to insert an image. Default true,
	"color": false //Button to change color of font  
});

h3. Custom Templates for Toolbar 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' and optional 'options' to manage the translations.

For example, the default template used for the editHtml mode button looks like this (with size fetched from the optional 'options')

  

    "
  

You can change it to not use the pencil icon (for example) by defining the custom template like this:

var myCustomTemplates = {
  html : function(locale) {
    return "
" +
           "
" +
           "HTML" +
           "
" +
           "
";
  }
}

// pass in your custom templates on init
$('#some-textarea').wysihtml5({
   customTemplates: myCustomTemplates
});

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>:

$('#some-textarea').wysihtml5({
	"stylesheets": ["/path/to/editor.css"]
});

h3. Events

Wysihtml5 exposes a "number of events":https://github.com/xing/wysihtml5/wiki/Events. You can hook into these events when initialising the editor:

$('#some-textarea').wysihtml5({
	"events": {
		"load": function() { 
			console.log("Loaded!");
		},
		"blur": function() { 
			console.log("Blured");
		}
	}
});

h3. Shallow copy by default, deep on request

Options you pass in will be added to the defaults via a shallow copy. (see "jQuery.extend()":http://api.jquery.com/jQuery.extend/ for details). You can use a deep copy instead (which is probably what you want if you're adding tags or classes to parserRules) via 'deepExtend', as in the parserRules example below.

h3. Parser Rules

If you find the editor is stripping out tags or attributes you need, then you'll want to extend (or replace) parserRules. This example extends the defaults to allow the and tags, and the class "middle":

$('#some-textarea').wysihtml5('deepExtend', {
  parserRules: {
    classes: {
      "middle": 1
    },
    tags: {
      strong: {},
      em: {}
    }
  }
});

$.fn.wysihtml5.defaultOptions

$(this).wysihtml5('resetDefaults') 

var wysihtml5Editor = $('#some-textarea').data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");