Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | # Summernote |
| 2 | Super Simple WYSIWYG Editor on Bootstrap(3.0 and 2.x). |
||
| 3 | |||
| 4 | [](http://travis-ci.org/HackerWins/summernote) |
||
| 5 | |||
| 6 | ### Summernote |
||
| 7 | Summernote is a javascript program that helps you to create WYSIWYG Editor on web. |
||
| 8 | |||
| 9 | Home Page: http://hackerwins.github.io/summernote/ |
||
| 10 | |||
| 11 | ### Why Summernote? |
||
| 12 | |||
| 13 | Summernote has something specials no like others. |
||
| 14 | * Simple UI |
||
| 15 | * Interative WYSIWYG editing |
||
| 16 | * Handy integration with server |
||
| 17 | |||
| 18 | #### Inspired by |
||
| 19 | * Gmail WYSIWYG Editor (http://www.gmail.com) |
||
| 20 | * Redactor (http://imperavi.com/redactor/) |
||
| 21 | |||
| 22 | ### Easy to install |
||
| 23 | |||
| 24 | Summernote uses opensouce libraries(jQuery, bootstrap, fontAwesome) |
||
| 25 | |||
| 26 | #### 01. include js/css |
||
| 27 | |||
| 28 | Include Following code into `<head>` tag of your HTML: |
||
| 29 | |||
| 30 | ```html |
||
| 31 | <!-- include libraries(jQuery, bootstrap, fontawesome) --> |
||
| 32 | <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> |
||
| 33 | <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> |
||
| 34 | <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
||
| 35 | <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" /> |
||
| 36 | |||
| 37 | <!-- include summernote css/js--> |
||
| 38 | <link href="summernote.css" rel="stylesheet"> |
||
| 39 | <script src="summernote.min.js"></script> |
||
| 40 | ``` |
||
| 41 | |||
| 42 | If your summernote download is placed in a different folder, don't forget to change file's paths. |
||
| 43 | |||
| 44 | #### 02. target elements |
||
| 45 | And place `div` tag to somewhere in the `body` tag. This element will be placed by the visual representation of the summernote. |
||
| 46 | ```html |
||
| 47 | <div id="summernote">Hello Summernote</div> |
||
| 48 | ``` |
||
| 49 | |||
| 50 | #### 03. summernote |
||
| 51 | Finally, run script after document ready. |
||
| 52 | ```javascript |
||
| 53 | $(document).ready(function() { |
||
| 54 | $('#summernote').summernote(); |
||
| 55 | }); |
||
| 56 | ``` |
||
| 57 | |||
| 58 | ### API |
||
| 59 | Get HTML `code` if you need. |
||
| 60 | |||
| 61 | ```javascript |
||
| 62 | var sHTML = $('#summernote').code(); |
||
| 63 | ``` |
||
| 64 | |||
| 65 | `Destroy` summernote. |
||
| 66 | |||
| 67 | ```javascript |
||
| 68 | $('#summernote').destroy(); |
||
| 69 | ``` |
||
| 70 | |||
| 71 | #### Dependencies |
||
| 72 | * jQuery: http://jquery.com/ |
||
| 73 | * Bootstrap: http://getbootstrap.com (both 2.x and 3.x) |
||
| 74 | * fontAwesome: https://github.com/FortAwesome/Font-Awesome (both 3.x and 4.x) |
||
| 75 | |||
| 76 | ### Supported platform |
||
| 77 | * Modern Browser (Safari, Chrome, Firefox, Opera, Internet Explorer 9+) |
||
| 78 | * OS (Windows, Mac, Linux) |
||
| 79 | |||
| 80 | ### Upcoming Features |
||
| 81 | * Responsive Toolbar |
||
| 82 | * Table: Handles(Sizing, Selection) and Popover |
||
| 83 | * support IE8 |
||
| 84 | * Clipboard |
||
| 85 | * Media Object Selection |
||
| 86 | |||
| 87 | ### Change Log |
||
| 88 | |||
| 89 | #### v0.5.9 2014-09-21 |
||
| 90 | * Dom Editing: insert(Un)OrderedList, indent/outdent |
||
| 91 | * History in a line. |
||
| 92 | |||
| 93 | #### v0.5.8 2014-08-31 |
||
| 94 | * Remove `autoFormatRange` option |
||
| 95 | * Fixed `onChange` issues |
||
| 96 | |||
| 97 | #### v0.5.7 ~ v0.5.4 2014-08-29 ~ 2014-08-23 |
||
| 98 | * Dom editing: insertPara, insertNode |
||
| 99 | |||
| 100 | #### v0.5.3 2014-07-25 |
||
| 101 | * Extract codemirror.autoFormatOnStart option |
||
| 102 | * Bug patch (createLink) |
||
| 103 | |||
| 104 | #### v0.5.2 2014-07-20 |
||
| 105 | * Air Mode |
||
| 106 | * And bug patch (scroll, createLink, ...) |
||
| 107 | |||
| 108 | #### v0.5.1 2014-03-16 |
||
| 109 | * Support 15 Languages(https://github.com/HackerWins/summernote/tree/master/lang) |
||
| 110 | * Add local-server for develop summernote. |
||
| 111 | * Font style: Font-Family |
||
| 112 | * And Bug patch. |
||
| 113 | |||
| 114 | #### v0.5 2013-12-29 |
||
| 115 | * Support both Font-Awesome 3.x and 4.x |
||
| 116 | * CodeMirror as Codeview |
||
| 117 | * Insert Video (by cdownie) |
||
| 118 | * Support 5 Languages(by hendrismit, tschiela, inomies, cverond) |
||
| 119 | * Restructuring: jQuery build pattern |
||
| 120 | |||
| 121 | #### v0.4 2013-11-01 |
||
| 122 | * Support both Bootstrap 3.0 and 2.x |
||
| 123 | * Fullscreen |
||
| 124 | * Codeview |
||
| 125 | * Image Upload callback |
||
| 126 | |||
| 127 | #### v0.3 2013-09-01 |
||
| 128 | * Bugs(image upload, fontsize, tab, recent color, ...) |
||
| 129 | * Help dialog(keyboard shortcut) |
||
| 130 | * Init options(event callbacks, custom toolbar) |
||
| 131 | * Resize bar |
||
| 132 | * Support IE8 Beta(some range bugs, can't insert Image) |
||
| 133 | |||
| 134 | #### v0.2, 2013-08-01 |
||
| 135 | * Undo/Redo |
||
| 136 | * Image sizing handle and popover |
||
| 137 | * Support standalone css |
||
| 138 | * Support Multiple Editor |
||
| 139 | * Remove jQuery.curstyles dependency |
||
| 140 | |||
| 141 | #### v0.1, 2013-07-01 |
||
| 142 | * Font style: size, color, bold, italic, underline, remove font style |
||
| 143 | * Para style: bullet, align, outdent, indent, line height |
||
| 144 | * Image: drag & drop, dialog |
||
| 145 | * Link: popover and dialog |
||
| 146 | * Table: create table with dimension picker |
||
| 147 | |||
| 148 | ### for Hacker |
||
| 149 | |||
| 150 | #### structure of summernote.js |
||
| 151 | |||
| 152 | ``` |
||
| 153 | summernote.js - Renderer.js (Generate markup) - Locale.js (Locale object) |
||
| 154 | ㄴEventHandler.js - Editor.js (Abstract editor) |
||
| 155 | ㄴStyle.js (Style Getter and Setter) |
||
| 156 | ㄴHistory.js (Store on jQuery.data) |
||
| 157 | ㄴToolbar.js (Toolbar module) |
||
| 158 | ㄴPopover.js (Popover module) |
||
| 159 | ㄴHandle.js (Handle module) |
||
| 160 | ㄴDialog.js (Dialog module) |
||
| 161 | -----------------------------Core Script----------------------------- |
||
| 162 | agent.js (agent information) |
||
| 163 | async.js (aysnc utility) |
||
| 164 | key.js (keycode object) |
||
| 165 | dom.js (dom functions) |
||
| 166 | list.js (list functions) |
||
| 167 | range.js (W3CRange extention) |
||
| 168 | --------------------------------------------------------------------- |
||
| 169 | ``` |
||
| 170 | |||
| 171 | #### build summernote |
||
| 172 | ```bash |
||
| 173 | # grunt-cli is need by grunt; you might have this installed already |
||
| 174 | npm install -g grunt-cli |
||
| 175 | npm install |
||
| 176 | |||
| 177 | # build full version of summernote: dist/summernote.js |
||
| 178 | grunt build |
||
| 179 | |||
| 180 | # generate minified copy: dist/summernote.min.js, dist/summernote.css |
||
| 181 | grunt dist |
||
| 182 | ``` |
||
| 183 | At this point, you should now have a `build/` directory populated with everything you need to use summernote. |
||
| 184 | |||
| 185 | #### test summernote |
||
| 186 | run tests with PhantomJS |
||
| 187 | ```bash |
||
| 188 | grunt test |
||
| 189 | ``` |
||
| 190 | |||
| 191 | #### start local server for developing summernote. |
||
| 192 | run local server with connect and watch. |
||
| 193 | ```bash |
||
| 194 | # this will open a browser on http://localhost:3000. |
||
| 195 | grunt server |
||
| 196 | # If you change source code, automatically reload your page. |
||
| 197 | ``` |
||
| 198 | |||
| 199 | #### Coding convention |
||
| 200 | * JSHint: http://www.jshint.com/about/ |
||
| 201 | * JSHint rule: https://github.com/HackerWins/summernote/blob/master/.jshintrc |
||
| 202 | |||
| 203 | ### Contacts |
||
| 204 | * Email: susukang98@gmail.com |
||
| 205 | * Twitter: http://twitter.com/hackerwins |
||
| 206 | |||
| 207 | ### License |
||
| 208 | summernote may be freely distributed under the MIT license. |