Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1312 | jmachado | 1 | bootstrap-wysiwyg |
| 2 | ================= |
||
| 3 | |||
| 4 | Important information for Github requests/issues |
||
| 5 | ------------------------------------------------ |
||
| 6 | |||
| 7 | Please do not submit issues/comments to this repo. Instead, submit it to |
||
| 8 | |||
| 9 | https://github.com/steveathon/bootstrap-wysiwyg |
||
| 10 | |||
| 11 | Although this is the original repository, we need the project to be tiny and |
||
| 12 | focused on the needs of the MindMup tool, which means that we do not want to |
||
| 13 | complicate it with all the various bits and pieces needed for other usages and |
||
| 14 | older browsers. |
||
| 15 | |||
| 16 | Meanwhile, Steve was kind enough to create a fork, backport it to older |
||
| 17 | browsers, extend and integrate all kinds of changes. Steve's fork does not need |
||
| 18 | to stay small, slim and focused, so please use his repo for all your needs if |
||
| 19 | this plugin does provide out of the box |
||
| 20 | |||
| 21 | About the editor |
||
| 22 | ---------------- |
||
| 23 | |||
| 24 | Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for [MindMup](http://www.mindmup.com). Here are the key features: |
||
| 25 | |||
| 26 | * Automatically binds standard hotkeys for common operations on Mac and Windows |
||
| 27 | * Drag and drop files to insert images, support image upload (also taking photos on mobile devices) |
||
| 28 | * Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on... |
||
| 29 | * Does not force any styling - it's all up to you |
||
| 30 | * Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported [browser command](https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla |
||
| 31 | ) |
||
| 32 | * Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV |
||
| 33 | * (Optionally) cleans up trailing whitespace and empty divs and spans |
||
| 34 | * Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6) |
||
| 35 | * Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome) |
||
| 36 | |||
| 37 | Basic Usage |
||
| 38 | ----------- |
||
| 39 | |||
| 40 | See http://mindmup.github.com/bootstrap-wysiwyg/ |
||
| 41 | |||
| 42 | Customising |
||
| 43 | ----------- |
||
| 44 | You can assign commands to hotkeys and toolbar links. For a toolbar link, just put the execCommand command name into a data-edit attribute. |
||
| 45 | 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 |
||
| 46 | |||
| 47 | ```html |
||
| 48 | <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> |
||
| 49 | <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a> |
||
| 50 | </div> |
||
| 51 | ``` |
||
| 52 | |||
| 53 | To pass arguments to a command, separate a command with a space. |
||
| 54 | |||
| 55 | ```html |
||
| 56 | <a data-edit="fontName Arial">...</a> |
||
| 57 | ``` |
||
| 58 | |||
| 59 | You can also use input type='text' with a data-edit attribute. When the value |
||
| 60 | is changed, the command from the data-edit attribute will be applied using the |
||
| 61 | input value as the command argument |
||
| 62 | |||
| 63 | ```html |
||
| 64 | <input type="text" data-edit="createLink"> |
||
| 65 | ``` |
||
| 66 | 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 |
||
| 67 | |||
| 68 | ```html |
||
| 69 | <input type="file" data-edit="insertImage"> |
||
| 70 | ``` |
||
| 71 | |||
| 72 | To change hotkeys, specify the map of hotkeys to commands in the hotKeys option. For example: |
||
| 73 | |||
| 74 | ```javascript |
||
| 75 | $('#editor').wysiwyg({ |
||
| 76 | hotKeys: { |
||
| 77 | 'ctrl+b meta+b': 'bold', |
||
| 78 | 'ctrl+i meta+i': 'italic', |
||
| 79 | 'ctrl+u meta+u': 'underline', |
||
| 80 | 'ctrl+z meta+z': 'undo', |
||
| 81 | 'ctrl+y meta+y meta+shift+z': 'redo' |
||
| 82 | } |
||
| 83 | }); |
||
| 84 | ``` |
||
| 85 | |||
| 86 | Styling for mobile devices |
||
| 87 | -------------------------- |
||
| 88 | |||
| 89 | This editor should work pretty well with mobile devices, but you'll need to consider the following things when styling it: |
||
| 90 | - keyboards on mobile devices take a huge part of the screen |
||
| 91 | - having to scroll the screen to touch the toolbar can cause the editing component to lose focus, and the mobile device keyboard might go away |
||
| 92 | - mobile devices tend to move the screen viewport around to ensure that the focused element is shown, so it's best that the edit box is glued to the top |
||
| 93 | |||
| 94 | For the content attachment editor on MindMup, we apply the following rules to mobile device styling: |
||
| 95 | - edit box is glued to the top, so the focus doesn't jump around |
||
| 96 | - toolbar is below the edit box |
||
| 97 | - on portrait screens, edit box size is 50% of the screen |
||
| 98 | - on landscape screens, edit box size is 30% of the screen |
||
| 99 | - as the screen gets smaller, non-critical toolbar buttons get hidden into a "other" menu |
||
| 100 | |||
| 101 | Dependencies |
||
| 102 | ------------ |
||
| 103 | * jQuery http://jquery.com/ |
||
| 104 | * jQuery HotKeys https://github.com/jeresig/jquery.hotkeys |
||
| 105 | * Bootstrap http://twitter.github.com/bootstrap/ |