GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.38k stars 4.06k forks source link

Question: Replace Rich Text Editor with summernote does not seem to work #2920

Closed wfcheng closed 3 years ago

wfcheng commented 4 years ago

I am trying to replace the default RTE in grapesjs with summernote. I got some help from the author of summernote and got this codepen to work somewhat, but the summernote author concluded that:

But grapejs p element is a content in iframe. In other words, there is a structure where a p tag exists in an iframe and ui must exist outside. Summernote is a structure that hides the element and puts the tag of summernote. It seems difficult to use because the rest of the resources of summernote are not loaded in the iframe.

I prefer summernote over TinyMCE or CKEditor since it is "MIT license". Has anyone tried to replace RTE with summernote with success? Any suggestions?

wfcheng commented 4 years ago

Made some more changes and now the summernote toolbar appears correctly but only bullet formatting works. The new codepen is here. @artf Any pointers would be greatly appreciated.

timramseyjr commented 4 years ago

@wfcheng Did you ever get anywhere with this? The codepen includes the canvas script/styles which adds the resources inside the iframe, so I was a little confused what summernote author was referring to.

wisecheng38 commented 4 years ago

@timramseyjr I ended up just adding more buttons to the RTE toolbar to allow applying font styles and color on selected text, even though the grapesjs documentation recommends to use the style manager. I found that it is more user friendly to have them on the toolbar.

timramseyjr commented 4 years ago

Thanks. After looking closer, it looks like the CKEditor implementation toolbar is outside of the iframe controlling the text inside the frame, so the summernote authors comments now make sense. The only way I can see to implement summernote in grapesjs would be to create a custom component where everything is housed and invoked in the iframe.

wfcheng commented 3 years ago

Close issue as I am using a workaround.