Creating a dash WYSIWYG markdown editor component (CKEditor or Summernote)

Dash Python
1

Hello, I would like to create a WYSIWYG editor element in dash that either bases on Summernote or CKEditor.

Both have a react library with react summernote or react-ckeditor5
and thus should work with the “Build your own component” tutorial.

I startet to use the boilerplate command
cookiecutter https://github.com/plotly/dash-component-boilerplate.git

And added both

    "react-summernote": "^1.0.5",
    "@ckeditor/ckeditor5-react":"^3.0.2"

to the dependencies to check both editors.

When I insert

import ReactSummernote from 'react-summernote';

or

import {CKEditor} from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

to the src/lib/components .react file

I get the error

Can't resolve '@ckeditor/ckeditor5-react' for ckeditor and
Module not found: Error: Can't resolve 'jquery' for summernote even if I add
"jquery":"^3.6.0" to the dependencies.

Is anybody interested in helping me creating this component? I assume, it would be very beneficial for everybody to have it.

2

npm i @ckeditor/ckeditor5-react did it for me, but i didn’t have the jquery problem. Just the 'Can’t resolve ‘@ckeditor/ckeditor5-react’

1 Like