Home

Awesome

bootstrap-wysiwyg

Important information for Github requests/issues

Please do not submit issues/comments to this repo. Instead, submit it to

https://github.com/steveathon/bootstrap-wysiwyg

Although this is the original repository, we need the project to be tiny and focused on the needs of the MindMup tool, which means that we do not want to complicate it with all the various bits and pieces needed for other usages and older browsers.

Meanwhile, Steve was kind enough to create a fork, backport it to older browsers, extend and integrate all kinds of changes. Steve's fork does not need to stay small, slim and focused, so please use his repo for all your needs if this plugin does provide out of the box

About the editor

Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for MindMup. Here are the key features:

Basic Usage

See http://mindmup.github.com/bootstrap-wysiwyg/

Customising

You can assign commands to hotkeys and toolbar links. For a toolbar link, just put the execCommand command name into a data-edit attribute. For more info on execCommand, see http://www.quirksmode.org/dom/execCommand.html and https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
</div>

To pass arguments to a command, separate a command with a space.

  <a data-edit="fontName Arial">...</a>

You can also use input type='text' with a data-edit attribute. When the value is changed, the command from the data-edit attribute will be applied using the input value as the command argument

<input type="text" data-edit="createLink">

If the input type is file, when a file is selected the contents will be read in using the FileReader API and the data URL will be used as the argument

<input type="file" data-edit="insertImage">

To change hotkeys, specify the map of hotkeys to commands in the hotKeys option. For example:

$('#editor').wysiwyg({
  hotKeys: {
    'ctrl+b meta+b': 'bold',
    'ctrl+i meta+i': 'italic',
    'ctrl+u meta+u': 'underline',
    'ctrl+z meta+z': 'undo',
    'ctrl+y meta+y meta+shift+z': 'redo'
  }
});

Styling for mobile devices

This editor should work pretty well with mobile devices, but you'll need to consider the following things when styling it:

For the content attachment editor on MindMup, we apply the following rules to mobile device styling:

Dependencies