Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
By Sarah Gooding - Sep 20, 2024
summernote
Advanced tools
What is summernote?
Summernote is a JavaScript library that provides a WYSIWYG (What You See Is What You Get) editor. It allows users to create and edit content with a rich text editor that includes various formatting options, image and video embedding, and more.
What are summernote's main functionalities?
Basic Text Formatting
This code initializes Summernote on a textarea element, enabling basic text formatting options like bold, italic, underline, and more.
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
<textarea id="summernote"></textarea>Image Upload
This code demonstrates how to handle image uploads in Summernote by providing a custom callback function for the onImageUpload event.
<script>
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
// Custom image upload logic
}
}
});
});
</script>
<textarea id="summernote"></textarea>Video Embedding
Summernote allows users to embed videos directly into the editor. This is done through the toolbar options available in the initialized editor.
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
<textarea id="summernote"></textarea>Custom Toolbar
This code shows how to customize the toolbar in Summernote by specifying the buttons and their groups.
<script>
$(document).ready(function() {
$('#summernote').summernote({
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
});
</script>
<textarea id="summernote"></textarea>Other packages similar to summernote
tinymce
TinyMCE is another popular WYSIWYG editor that offers a wide range of features similar to Summernote. It provides extensive customization options, plugins, and a robust API for developers.
ckeditor
CKEditor is a highly versatile WYSIWYG editor that supports rich text editing, image and media embedding, and various plugins. It is known for its flexibility and extensive documentation.
quill
Quill is a modern WYSIWYG editor that is lightweight and highly customizable. It offers a modular architecture, making it easy to extend and customize according to specific needs.
Summernote
Super simple WYSIWYG Editor.
Summernote
Summernote is a JavaScript library that helps you create WYSIWYG editors online.
Home page: https://summernote.org
Why Summernote?
Summernote has a few special features:
- Paste images from clipboard
- Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all
- Simple UI
- Interactive WYSIWYG editing
- Handy integration with server
- Supports Bootstrap 3 and 4 integrities
- Lots of plugins and connectors provided together
Installation and dependencies
Summernote is built on jQuery.
1. Include JS/CSS
Include the following code in the <head> tag of your HTML:
<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>
2. Target a element
Then place a div tag somewhere in the body tag. This element will be replaced with the summernote editor.
<div id="summernote">Hello Summernote</div>
3. Summernote it!
Finally, run this script after the DOM is ready:
$(document).ready(function() {
$('#summernote').summernote();
});
For more examples, please visit to homepage.
API
code - get the HTML source code underlying the text in the editor:
var html = $('#summernote').summernote('code');
For more detail about API, please refer to document.
Warning - code injection
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.
For contributing
https://github.com/summernote/summernote/blob/develop/CONTRIBUTING.md
Contacts
- Facebook user group: https://www.facebook.com/groups/summernote
- Summernote Slack: Join the Summernote Slack community
License
Summernote may be freely distributed under the MIT license.
v0.8.11
Improvement and bug fix
- Implemented commit command (resets history but keeps editor content).
- Add color picker support
- Add start parameter for YouTube embedding
- Add OnImageLinkInsert callback for handling inserted urls
- Make the "range" object available for external modules.
- When creating a link Summernote now checks maxTextLength
- Add uglify for summernote-lite
- Do not add default scheme for relative URLs
- Update custom color selection logic
- Move test file into the right location
- Clean up test codes
- Add styles for custom color selection
- Add forecolor and backcolor buttons
- Apply latest style changes into another
- Do not wrap bs4 toolbar to prevent text flooding over toolbar UI
- Do not wrap bs3 toolbar to prevent loosing the background shading
- Add an example for placeholder text
- Add an example for custom styletags
- Drop debounce rate from 100ms to 10ms
- Remove wrong executable attributes
- Use default Bootstrap 4 checkbox style, not custom-control
- Make AutoLink module follows linkTargetBlank option
- Use class instead of id for "open in new window" checkbox to avoid du… …
- Add randomized id to link dialog checkbox
- Move random id generation to Context
- Revert the randomization changes
- Prevent error by settings the default container
- Less clutter by moving templates into .github
- Allow html tags on placeholder
- Allow protocol-less URL for YouTube video insertion
- Make full screen mode properly even with maxHeight option
- Add an example for Lite + Legacy Bootstrap
- Add video and embed tag into the void element list
- Fixed #1410 using a configurable blockquote breaking level.
- FIX click on HintPopover suggestions doesnt insert
- Fix issue #1964 with copy paste content in reverse order
- Fix wrong argument result due to the use of incorrect function type
- Fix link autodetection …
- Fix dropdown toggle issue on lite while using with Bootstrap
- Fix wrong lite style
- Fix wrong bs4 checkbox
- Fix expectContents to work with given context
- Fix tests - to expect valid markup.
- Fixed indentation of list items …
- Fixed outdent of nested list items. …
- Fix conflict by merging #1574
- Fix indentation on checkbox creations
- Fix Bootstrap4 background transparency issue #3024
- Fix blocking form submitting issue #530
- Fix minor things
- Fix order of Airmode elements
- Fix broken examples and update to use latest libraries
- Fix class name for AirMode in lite.js
Translation
- Improved translation in pt-PT for image, table, style and help sections
- Improved translation in pt-BR for image section
- Added missing new line at the end of file lang/summernote-pt-PT.js
- pl-PL i18n update
- Update summernote-nl-NL.js
- Update summernote-pt-BR.js
- Add missing translations in zh-CN for table, etc
- Update summernote-de-DE.js …
- Fix pt-BR and gl-ES lang keys for style.p translations
- Update summernote-th-TH.js
- Missing translations with tabel (#3031) …
- Update Finnish translation
FAQs
Super simple WYSIWYG editor
The npm package summernote receives a total of 100,261 weekly downloads. As such, summernote popularity was classified as popular.
We found that summernote demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 24 Nov 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Understanding License Exceptions: What Developers Need to Know
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
By Sarah Gooding - Sep 20, 2024
Security News
Developer Accuses Tencent of Copyright Violation After Python Utility’s License Changed from GPLv3 to BSD
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.
By Sarah Gooding - Sep 18, 2024