Name: summernote
Owner: Frappe
Description: Super simple WYSIWYG editor
Forked from: summernote/summernote
Created: 2017-02-28 06:03:18.0
Updated: 2017-06-19 07:29:14.0
Pushed: 2017-02-27 00:54:40.0
Homepage: http://summernote.org
Size: 8725
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Super simple WYSIWYG Editor.
Summernote is a JavaScript library that helps you create WYSIWYG editors online.
Home page: http://summernote.org
Summernote has a few special features:
Summernote uses opensource libraries: jQuery, Bootstrap.
For Meteor, just run meteor add summernote:summernote. More info in the Meteor README.
Also there's an adaptation for React: react-summernote
For other/no frameworks:
Include the following code in the <head> tag of your HTML:
include libraries(jQuery, bootstrap) -->
ipt type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
k rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
ipt type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
include summernote css/js-->
k href="summernote.css" rel="stylesheet">
ipt src="summernote.js"></script>
Then place a div tag somewhere in the body tag. This element will be replaced with the summernote editor.
id="summernote">Hello Summernote</div>
Finally, run this script after the DOM is ready:
cument).ready(function() {
'#summernote').summernote();
For more examples, please visit to homepage.
code - get the HTML source code underlying the text in the editor:
html = $('#summernote').summernote('code');
For more detail about API, please refer to document.
The code view allows the user to enter script contents. Make sure to filter/sanitize the HTML on the server. Otherwise, an attacker can inject arbitrary JavaScript code into clients.
ody container: <div class="note-editable">, <td>, <blockquote>, <ul>
lock node: <div>, <p>, <li>, <h1>, <table>
oid block node: <hr>
nline node: <span>, <b>, <font>, <a>, ...
oid inline node: <img>
ext node: #text
<ul> has only <li> nodes.<p> when enter key pressed.#text and void inline node doesn't have children.unt-cli is need by grunt; you might have this installed already
install -g grunt-cli
install
ild full version of summernote: dist/summernote.js
t build
nerate minified copy: dist/summernote.min.js, dist/summernote.css
t dist
At this point, you should now have a build/ directory populated with everything you need to use summernote.
run tests with Karma and PhantomJS
t test
If you want run tests on other browser,
change the values for broswers properties in Gruntfile.js.
a: {
l: {
browsers: ['PhantomJS'],
reporters: ['progress']
You can use Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS and IE beside PhantomJS.
Once you run grunt test, it will watch all javascript file. Therefore karma run tests every time you chage code.
run local server with connect and watch.
t server
en a browser on http://localhost:3000.
you change source code, automatically reload your page.
summernote may be freely distributed under the MIT license.