Embedding a Table in a Rich Text Editor

[jared]

Are there any instances where embedding a handsontable within a rich text editor has been successful or are there examples of this integration?

I’ve developed a highly customized table using handsontable and now I’m seeking to incorporate it into a WYSIWYG/Rich-text editor in React. However, I’m encountering difficulties in seamlessly integrating the table cells with the parent editor toolbar.

Any insights or examples of similar implementations would be greatly appreciated!

Thanks

[aleksandra_budnik]

Hi @jared

That’s an interesting topic. And as much I would love to have an example of a rich text editor we do not have it in our demo base.

I checked other topics and found this related (maybe it will help)

• https://github.com/wagtail/wagtail/issues/6041
• https://handsontable.com/docs/javascript-data-grid/cell-editor/
• Is there any way to implement rich text editor
• https://codepen.io/yaju-the-encoder/pen/BajqLXy?anon=true&view=pen
• https://stackoverflow.com/questions/35254878/summernote-rich-text-editor-with-handsontable

[jared]

Thank you for the resources!

[jared]

Hi @aleksandra_budnik, unfortunately I was not able to figure out a way to embed entire Handsontables within a rich text editor and make them play nicely with the rest of the document. That said, I found a workaround by using multiple editors surrounding the tables and am now running into a new problem I’m hoping you can help me with.

The issue I’m experiencing is essentially having multiple handsontables on the same page causes each table to lose it’s binding to the data, and I’m not able to interact with each table individually.

My requirements are that each table can be edited and bound to data independently from one another, this includes not just the data but doing things like adding rows or columns.

Here is my relevant code:

https://gist.github.com/jaredtibs/f046265746b8d577e1086eab1ac1687c

Any insight on how to independently use multiple tables on a single page would be greatly appreciated!

Thanks,

[aleksandra_budnik]

Thank you for sharing the code, @jared

I will review it and come back to you after the weekend.

[aleksandra_budnik]

Hi @jared

I couldn’t do a code review (I would need to confirm your support plan first). However, I created a demo with two Handsontable components using the same custom cell editor. Here’s a demo https://stackblitz.com/edit/vitejs-vite-bcw57g?file=src%2FApp.jsx,src%2FHandsontable1.jsx,src%2FHandsontable2.jsx,src%2FEditorComponent.jsx&terminal=dev

It seems that nothing is stopping us from using the same editor for both tables rendered on the same page (I also confirmed with developers, that there is no built-in limitation for the number of instances of editor that we can have).

[jared]

@aleksandra_budnik thank you for the in-depth example. That is very helpful. This should be enough for me to proceed with the project.

[aleksandra_budnik]

I’m happy to help. If you need anything, please let me know.