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

3 Likes
2

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

3 Likes
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
    )
1 Like