Embed a WYSIWYG editor in dash

Dash Python
1

Now I am trying to build my own app to take notes based on (local) html files.

Since I just figured out how to load these files in dash. (by flask server route or dash-dangerously-set-inner-html)

I am wondering if there is a way to embed a WYISWYG editor such as Froala, CKEditor or summernote into Dash.

ned2 suggested me to build a new component from a React component, while I am still new at python and js, so has anyone already done this or know how to do this? :slight_smile:

Thanks

2

We wrote just the guide for you, part of the our Dash user guide (dash.plot.ly): React.js for Python Devs: https://dash.plot.ly/react-for-python-developers

Another simple way to do this would be to just use dcc.Textarea and write your notes in markdown (rendering them with dcc.Markdown)

1 Like
3

@chriddyp thank you.

It is great to know convert react module to a component is the right way to do so, I will definitely try it later :slight_smile:

BTW, let me explain more about why Textarea + markdown is not enough: most of my notes are clipped from the web as HTML files, I want to make some modification (may just highlight some contents, or change color) on this. However, I think to add a Textarea as a separate comment part is a nice idea.

4

Also just in case you missed it, you could also render the notes directly with dash-dangerously-set-inner-html: GitHub - plotly/dash-dangerously-set-inner-html: Dash component to dangerously set inner raw HTML.

Anyway, good luck and let us know what you come up with!

1 Like
6

Does anybody want to join creating a dash element from summernote, CKEditor? Unfortunately, my skills in react are very limited, but in a team, we could manage.