summernote / awesome-summernote Goto Github PK

View Code? Open in Web Editor NEW

388.0 33.0 67.0 126 KB

A curated list for summernote modules

awesome summernote

awesome-summernote's Introduction

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, 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

Facebook user group: https://www.facebook.com/groups/summernote
Summernote Slack: Join the Summernote Slack community

Testing powered by

BrowserStack Open-Source Program

License

Summernote may be freely distributed under the MIT license.

awesome-summernote's People

Contributors

Stargazers

Watchers

awesome-summernote's Issues

Plugins

add a background color to the entire panel
https://github.com/matthewstokeley/summernote-background-color

add a full screen background image
https://github.com/matthewstokeley/summernote-background-image

add google fonts - requires datatables
https://github.com/matthewstokeley/summernote-google-fonts

Sort items by name (ascending)

We've discussed how we handle the order of items, and we decided to sort them by their name, ascending.

help

I highlight plugin authors, I updated the plugin today to support summernote v0.7.1

But I do not know how to get the editor in the contents pre tags and added to the my dialog textarea.

see highlight plugin source this.getCodeInfo function

Request for help on the development of a new plugin

Hello, first of all thank you for this wonderful JavaScript library that is summernote.

I am currently developing a plugin which will allow me to manage an A4 format display to facilitate pdf editing.
https://github.com/jvancoillie/summernote-pages

I'm not sure if I'm posting this request in the right place but I'm going for it.

I have some difficulties with the cursor, when entering text and arriving at the footer, the page break works as expected ditto for the CMD + ENTER but I cannot position the cursor on this new page, you can observe this behavior on the plugin demo page https://jvancoillie.github.io/summernote-pages/. If you have any idea or clues?

I take all the criticisms, I want to apologize in advance for the code that I was able to produce, I am far from being familiar with javascript.

fontawesome icon picker plugin

Hi, I developed a plugin to let a user enter fontawesome icons into summernote.
There is a working demo here: http://bluecat76.github.io/summernote-faicon/ (use the smiley icon button).

It would be very kind if someone could take a look at it and help me improve functionality. Following improvements would be nice, but I don't know how to do it yet:

when you search something, the icon gets inserted at the beginning, no matter where the cursor was before in the editor
~~Inserting multiple items in a row inserts newer ones to the left, the cursor seems to remain before the inserted item~~ (updates to insert unicode text instead of fa-... classname)
make self.insertIcon more flexible, so you can define the markup inserted as icon.
add an 'onInsert' event

Help is appreciated. I'd also be happy to contribute the plugin by creating a pull request, but I think now it's not stable enough as a plugin.

Uploadcare plugin

We've just created a simple plugin for serverless uploading stuff to editor.

Repo: https://github.com/uploadcare/uploadcare-summernote
Demo: https://uploadcare.github.io/uploadcare-summernote/

does not support summernote 0.8.x

do you have any plan support summernote 0.8.x?

image attribute upload button if we upload the image where it will saved

Save Button for Summernote within Form

https://github.com/StudioJunkyard/summernote-save-button

Hope others find this useful.

Review the current links to make sure they're all OK

As noticed from @tylerecouture on PR #40, some of the links for emoji extensions were broken.
This might be happening to the other links as well, so we need to review them in order to provide a status on bad links or even to remove them.

Proposal: Instructions and Template file.

Hi @lqez

I've started making a wiki (https://github.com/DiemenDesign/summernote-plugins/wiki) to help people use and create plugins.
I've noticed on the main project page, that there are a lot of issue's with people wanting features that could be abstracted to plugins, but where they may have some programming knowledge, they don't know how to create plugins for Summernote. I also thought having a wiki explain how to add, use and even create plugins may reduce a lot of issues that people open, which I've also noticed a lot of repeated questions.

I was wondering what you think needs to be covered, that I haven't outlined in the TODO so far.

vaildate

Can support jquery-validate?thanks

Error TOOLTIP

Hi,

with the latest version of summernote 0.8.10 the tooltip seems to have a bug
Error: TOOLTIP: Option "container" provided type "undefined" but expected type "(string|element|boolean)"

Maybe also a conflict with other AdminLTE3 packages

set the cursor or the range at the end of the visible text, or the last word of the editor

I'm searching a way to set the cursor at the end of the last word inside the summernote content, or event the last html element setup from the init.
Maybe it's a dumb question ...

Integrating with Vue 2/3

Hi there,

I would like to know if you have built a version, plugin, bridge, connector, doc...whatever in order to allow us to integrate Summernote with Vue 2/3.

I googled but most of the pages I have found out give me outdated versions of possible solutions.

Best regards.

Join Awesome

Add awesome-summernote to https://github.com/sindresorhus/awesome

Render html compatible with mail.

Hi,

I would like to use summernote to edit mail instead of simple text actually. But email clients are very capricious...
Do we know if summernote rendering is compatible with emails clients ?

Thanks

edit: issue on wrong project...

Big Misc Section

The miscellaneous section is getting pretty big. Perhaps a new subgroup on Styling/Formatting could be broken out from the Misc group? Another option would be a Media section, as there are several image and video plugins.

Math plugin

I'm building a website for a school and i need a good math plugin , doesn't have to be super complex, any suggestions?

Working with PT rather that PX

Is there a way to work in PT font sizes rather than PX. I am going from summer note to PDF docs and would rather give a list of point font sizes in the dropdown than pixel font sizes.

TODO List: Abstract Issues and Feature Requests to Plugin Ideas from Summernote Issues

This is a list for people to have a go at making Plugins that can features to Summernote that I have procured from Issues in the main Summernote Project.

Table Headers
- summernote/summernote#380
image rotate
- summernote/summernote#1285
AutoFormat
- Similar to https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html
WordCounter
- As in https://wordcounter.net/ Only something that can count instances of a word used. Not just a Character Counter with and without markup elements.
Typing Colour Picker than can use entered Hex Codes to set colours.
- summernote/summernote#988
Adjust Font Size up or down by one size by button click.
- summernote/summernote#3397
Spolier Text
- summernote/summernote#3297

Image manager

Hallo, have done a simple image manager for summernote, here a preview http://www.fulviocorsini.it/summernote/ and download from here http://www.fulviocorsini.it/summernote-image-manager click on the last line or just the attached
summernote-image-manager.zip
file

I'm sorry but don't how to open a gist or to add the manager to the list.

Info about my plugins

Sorry, I'm still kind of new to Github, and I'm not entirely sure how the Pull Requests and forking work yet, so this will have to do for now.

summernote-emoji
- A dropdown list of my favorite emojiOne images, embedded as base64 strings for easy portability
summernote-ext-specialchars
- A few tweaks to the official plugin, revising the view and making it more mobile-friendly

request for add equation plugin.

Hi guys! I am developing plugin for insert equations into the text. i have little experience in js, therefore i can't to solve some problems, but this plugin works. If you want to use it, and if you have wish, you may improve it. Thanks.
summernote-equation-plugin

summernote / awesome-summernote Goto Github PK

awesome-summernote's Introduction

Summernote

Summernote

Why Summernote?

Installation and dependencies

1. Include JS/CSS

2. Target a element

3. Summernote it!

API

Warning - code injection

For contributing

Contacts

Testing powered by

License

awesome-summernote's People

Contributors

Stargazers

Watchers

Forkers

awesome-summernote's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs