Pip install dash-summernote

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

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

3 Likes