Giter VIP home page Giter VIP logo

summernote.github.io's Introduction

Summernote

Super simple WYSIWYG Editor.

Build Status npm version Coverage Status

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, 4 and 5 integrations
  • 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="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.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/.github/CONTRIBUTING.md

Contacts

Testing powered by


BrowserStack Open-Source Program

License

Summernote may be freely distributed under the MIT license.

summernote.github.io's People

Contributors

callkalpa avatar chr15m avatar dudmy avatar easylogic avatar hackerlose avatar hackerwins avatar insanehong avatar jckmgns avatar josefassad avatar lqez avatar mattrix avatar mstred avatar outsideris avatar reinaldoacdc avatar rgutierrez-cotech avatar sblondon avatar seapy avatar simialbi avatar soomtong avatar umutto avatar yeonhoyoon avatar youjung-hong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

summernote.github.io's Issues

Enable backspace key?

I am unable to use the backspace and delete keys in the summernote editors that I have integrated into my site.

I understand that this is probably by design, and in fact a little poking around the repo has revealed some code that seems to confirm that suspicion, but I can't find any documentation on how to configure summernote to enable deleting text and/or images.

Currently I am unable to delete anything (text, pictures, videos, etc) once it's been inserted and it makes for a really lousy user experience.

Loading HTML into Summernote

To make the summernote content persistent, I save it in a DB. When I load the content back (using insertText), summernote shows the HTML code rather than interpret/render it. How do I save and load the summernote content?

add api document

API 문서화를 위해서 디렉토리 하나 추가합니다.

jsduck 이란 툴을 사용해서 api 문서를 만들게 됩니다.

jsduck 에 만들어진 문서가 자동으로 push 되게 되어 있습니다.

commit 메세지는 summernote-bot 이라고 들어옵니다.

참고하세요. ~

빌드서버는 제 개인 개발서버로 하고 있고 30분마다 한번씩 실행될 예정입니다.

코드에 주석을 달면 자동으로 문서를 만들어줍니다.

ps. 주석만 잘 될면 될 것 같네요. ㅠ

Please add a hint how to intregrate with JQuery.Validation and JQuery Validation Unobstrusive

Hey,
when you use summernote together with Jquery Validation you might get some validation issues on the client. This can get fixed, if the programmer updates the jquery validation default ignores:

// This will set `ignore` for all validation calls
jQuery.validator.setDefaults({
  // This will ignore all hidden elements alongside `contenteditable` elements
  // that have no `name` attribute
  ignore: ":hidden, [contenteditable='true']:not([name])"
});

When you google around you will see that this is a common issue and lots of guys use hardcoded Ids to handle this issue.

See this discussion here:
jquery-validation/jquery-validation#1875

And this stackoverflow thread:
https://stackoverflow.com/questions/42086841/jquery-validate-with-summernote-editor-error-cannot-read-property-replace-of/58092791#58092791

Vulnerability issue

There is a vulnerability issue in the plugin. snyk throwing the vulnerability issue.

insert element in current position

the insertText and insertNode should insert element in caret current position by default.
And there is a poor documentation about all api.

add static version of documentation?

When you search google for "summernote onpaste" i would expect summernote.org docs to show up first.

Any benefits of angular instead of regular static site generator other than angular documentation being neat?

i'm happy to help if you want to change directions

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.