You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

90 lines
3.2 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. # Summernote
  2. Super simple WYSIWYG Editor.
  3. [![Build Status](https://travis-ci.org/summernote/summernote.svg?branch=develop)](http://travis-ci.org/summernote/summernote)
  4. [![npm version](https://badge.fury.io/js/summernote.svg)](http://badge.fury.io/js/summernote)
  5. [![Dependency Status](https://gemnasium.com/summernote/summernote.svg)](https://gemnasium.com/summernote/summernote)
  6. [![Coverage Status](https://coveralls.io/repos/summernote/summernote/badge.svg?branch=develop&service=github)](https://coveralls.io/github/summernote/summernote?branch=develop)
  7. [![Sauce Test Status](https://saucelabs.com/browser-matrix/summernoteis.svg)](https://saucelabs.com/u/summernoteis)
  8. ### Summernote
  9. Summernote is a JavaScript library that helps you create WYSIWYG editors online.
  10. Home page: <https://summernote.org>
  11. ### Why Summernote?
  12. Summernote has a few special features:
  13. * Paste images from clipboard
  14. * Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all
  15. * Simple UI
  16. * Interactive WYSIWYG editing
  17. * Handy integration with server
  18. * Supports Bootstrap 3 and 4 integrities
  19. * Lots of [plugins and connectors](https://github.com/summernote/awesome-summernote) provided together
  20. ### Installation and dependencies
  21. Summernote is built on [jQuery](http://jquery.com/).
  22. #### 1. Include JS/CSS
  23. Include the following code in the `<head>` tag of your HTML:
  24. ```html
  25. <!-- include libraries(jQuery, bootstrap) -->
  26. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  27. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
  28. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  29. <!-- include summernote css/js-->
  30. <link href="summernote.css" rel="stylesheet">
  31. <script src="summernote.js"></script>
  32. ```
  33. #### 2. Target a element
  34. Then place a `div` tag somewhere in the `body` tag. This element will be replaced with the summernote editor.
  35. ```html
  36. <div id="summernote">Hello Summernote</div>
  37. ```
  38. #### 3. Summernote it!
  39. Finally, run this script after the DOM is ready:
  40. ```javascript
  41. $(document).ready(function() {
  42. $('#summernote').summernote();
  43. });
  44. ```
  45. For more examples, please visit to [homepage](http://summernote.org/examples).
  46. ### API
  47. `code` - get the HTML source code underlying the text in the editor:
  48. ```javascript
  49. var html = $('#summernote').summernote('code');
  50. ```
  51. For more detail about API, please refer to [document](http://summernote.org/getting-started/#basic-api).
  52. #### Warning - code injection
  53. The code view allows the user to enter script contents. Make sure to filter/[sanitize the HTML on the server](https://github.com/search?l=JavaScript&q=sanitize+html). Otherwise, an attacker can inject arbitrary JavaScript code into clients.
  54. ### For contributing
  55. https://github.com/summernote/summernote/blob/develop/CONTRIBUTING.md
  56. ### Contacts
  57. * Facebook user group: https://www.facebook.com/groups/summernote
  58. * Summernote Slack: [Join the Summernote Slack community](https://communityinviter.com/apps/summernote/summernote)
  59. ### License
  60. Summernote may be freely distributed under the MIT license.