Show and Tell: a quill based RTE for dash

Hey All!

Here is dash-quill (dash-quill · PyPI) a Quill-based rich text editor for Dash.

Hopefully this can help some others looking for a rich text editor that is slightly less fully featured vs dash-ace.

I built it using the usual dash-boilerplate cookiecutter stuff wrapped around the react-quill package, and it has the capability to do the usual rich text editor stuff - and most importantly it can accept pictures as an input (it returns them as base64). See below for an example in use.

Check out the github: GitHub - pandamodium/dash-quill: A Dash Rich Text Editor Component (based on Quill) and pypi package: dash-quill · PyPI

From usage.py for those interested in trying it out:

import dash_quill
import dash
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import dash_html_components as html

app = dash.Dash(__name__)
quill_mods = [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{'size': []}],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, 
        {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image'],
    ['clean']
]
app.layout = html.Div([
    dash_quill.Quill(
        id='input',
        value='my-value-is different',
        maxLength=70,
        modules={'toolbar':quill_mods,'clipboard':{'matchVisual': False,}}
#        label='my-label'
    ),
    html.Div(id='output'),
    dash_quill.Quill(
        id='input2',
        value='my-value',
        maxLength=70,
        modules={'toolbar':False,'clipboard':{'matchVisual': False,}}
#        label='my-label'
    ),
    html.Br(),
        dash_quill.Quill(
        id='input3',
        value='my-value',
        maxLength=70,
#        label='my-label'
    ),
    html.Br(),
    dcc.Textarea(id='test-text',value='PLACEHOLDER')
])


@app.callback(Output('output', 'children'), [Input('input', 'value')],[State('input', 'charCount')])
def display_output(value,charCount):
    return 'You have entered {0} and nochars is {1}'.format(value,charCount)

@app.callback(Output('test-text', 'value'), [Input('input', 'value')],[State('input', 'charCount')])
def display_output2(value,charCount):
    return 'You have entered {0} and nochars is {1}'.format(value,charCount)

@app.callback(Output('input3', 'value'), [Input('input', 'value')],[State('input', 'charCount')])
def display_output2(value,charCount):
    return 'You have entered {0} and nochars is {1}'.format(value,charCount)


if __name__ == '__main__':
    print(dash_quill.__version__)
    app.run_server(debug=True)
3 Likes

So nice!!!

1 Like