Pip install dash-summernote 📝

Dash Python
,
1

20242-ezgif.com-optimize (2)
Downloads
Proud to introduce my personal favorite rich-text editor to dash! https://summernote.org/

The projects source code is located here (:star:): GitHub - pip-install-python/dash_summernote: Summernote for dash

You can bring it into any dash application with a simple: pip install dash-summernote

And I’ve setup a simple example for you to refrence on how to use the package:

import dash_summernote
from dash import *

app = Dash(__name__, external_stylesheets=['https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css'], external_scripts=['https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js'])

app.layout = html.Div([
    dash_summernote.DashSummernote(
        id='summernote',
        value='my-value',
        toolbar=[
                    ["style", ["style"]],
                    ["font", ["bold", "underline", "clear"]],
                    ["fontname", ["fontname"]],
                    ["para", ["ul", "ol", "paragraph"]],
                    ["table", ["table"]],
                    ["insert", ["link", "picture", "video"]],
                    ["view", ["fullscreen", "codeview"]]
                ],
        height=300
    ),
    html.Center(html.H1('Output')),
    dash_summernote.DashSummernote(
        id='output',
        value='output',
        toolbar=[],
        height=300
    ),
    # html.Div(id='output')
])

@app.callback(Output('output', 'value'), Input('summernote', 'value'))
def display_output(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True, port='8057')

Bugs:

  • the file upload doesn’t work, you’ll need to past an image url until I can figure out a fix for 0.0.2 update
  • This package is dependent on an older version of bootsrap so if you have bootstrap in your project might be best to use dash-quill or replace bootstrap with dash-mantine-components till I can get an update pushed.

Pip Install Python GitHub stats
Also if you like this project check out my other dash packages I’ve built:

  1. full-calendar-component: Pip install full-calendar-component - #8 by PipInstallPython

  2. dash-swiper: Pip install dash-swiper

  3. dash-insta-stories: Pip install dash-insta-stories

  4. dash-emoji-mart: Pip install dash-emoji-mart

2

This is so awesome!
Soon you will need your own component library!
“Dash Pip Components” :grin:

4

Hi everyone!

Congrats for the component, it’s really useful.
I’ve a question, whats options does the parameter toolbar support ? is it possible to add font color?

5

You can compose a toolbar with pre-shipped buttons.

  • Insert
    • picture: open image dialog
    • link: open link dialog
    • video: open video dialog
    • table: insert a table
    • hr: insert a horizontal rule
  • Font Style
    • fontname: set font family
    • fontsize: set font size
    • fontsizeunit: set font size unit
    • color: set foreground and background color
    • forecolor: set foreground color
    • backcolor: set background color
    • bold: toggle font weight
    • italic: toggle italic
    • underline: toggle underline
    • strikethrough: toggle strikethrough
    • superscript: toggle superscript
    • subscript: toggle subscript
    • clear: clear font style
  • Paragraph style
    • style: format selected block
    • ol: toggle ordered list
    • ul: toggle unordered list
    • paragraph: dropdown for paragraph align
    • height: set line height
  • Misc
    • fullscreen: toggle fullscreen editing mode
    • codeview: toggle wysiwyg and html editing mode
    • undo: undo
    • redo: redo
    • help: open help dialog

You can setup font color and font forecolor with adding ['color', ['color']], to the toolbar=list() section in the component. For example:

DashSummernote(
        id='summernote',
        value='my-value',
        toolbar=[
            ["style", ["style"]],
            ["font", ["bold", "underline", "clear"]],
            ["fontname", ["fontname"]],
            ['color', ['color']], # add color
            ["para", ["ul", "ol", "paragraph"]],
            ["table", ["table"]],
            ["insert", ["link", "picture", "video"]],
            ["view", ["fullscreen", "codeview"]]
        ],
        height=300
    )
6

Sir hello it’s a good day!!
do you have any plan to add funtion convertion base64 IMG TAG by pasting captured image

7

Don’t think that functionality would fit within the components scope.

Ill be creating a post on the forum tomorrow that mentions this specific thing but in regards to dash-excalidraw as it works in a similar way.

The component itself is reading the raw image as base 64 or via a direct .png link.

The way i worked through this was having two appications. Dash as the primary frontend application and a django backend application with an API.

I take the data within the component, value extract it. On a submit button click, i take that value and send it to a POST request setup on my django applications api. This post request receives the value with the images in base 64 and it has a transcoder script that turns them into .png or .jpg files. I then take those files and save them to my django postgres database with the help of django filer.

On the dash application if i need to load back in the content that was created. I have a GET request that gathers all the files together and puts them in the corresponding locations they where in and returns it. In dash-excalidraw i need to return them back in base 64 but for summernote that wouldn’t be necessarily. You could just return the images with the associated link from the django app and it would work.

Keep in mind, base64 images are ~30% larger file size than a .png or .jpg. In specific components you might need to render in that format but its not ideal to save them in base64 format.

@nicobockko

8

wow you are so sweet thanks for explaining I did’t know!!

9

Thank you so much @PipInstallPython for this great contribution!

I have been trying to make the theme dark. Specifying theme=‘bs4-dark’ does not work unfortunately. Is there a trick to switch the theme of dash-summernote to dark?

10

Thanks for the kind words, happy to hear you like this component.

Yeah, you can hit any aspect of summernote via its style. For example use the inspector and look for the area you want to change and copy the css thats associated with that section of the component kinda like:

Screenshot 2025-06-19 at 7.52.56 AM
Screenshot 2025-06-19 at 7.52.56 AM1920×1047 118 KB

In that example, I grab the main body of summernote and I added background-color: red; if that doesn’t work you may need to try background-color: red !important;

.note-editor.note-frame .note-editing-area, .note-editor.note-airframe .note-editing-area {
    background-color: red;
    overflow: hidden;
}

Just copy that and add it to your assets/style.css file.

11

This is amazing - works like a charm!

Thank you @PipInstallPython, greatly appreciate it.

12

Hi @PipInstallPython,

Is it possible to specify keyMap for dash summer note? I would like to remove one of the keyboard shortcuts (CTRL+ENTER). I have tried few approaches (jQuery, eventListeners. listening to keydown) but without much success.

13

To be honest this isn’t an issue i’ve ever aproached within summernote. Not sure the best way to go about setting something like that up.

A bit wacky of an idea, just freeballing but maybe if you wrap dash-summernote within dash extentions keyboard? Dash

Alternatively maybe if fork the repo and make an event listener within that and rebuild the component you might have more success?

Not sure if any of this helps, but if you find a way i’d be interested to see what you come up with