Iframe and Quill-React, events are lost

entiendoNull commented 5 years ago

Hey,

I have an issue where I want to use React Quill within an iframe. It does render and callback events are triggered accordingly whenever typing in the editor, but the tool bar is not working at all.

This is what I do I am building a small template editor that will have areas (normal divs) that my hope is to convert into editable areas using Quill.

I then include my template into the iframe, but through ReactHtmlParser. With ReactHtmlParser I loop through each node and I look for divs (at the moment only one) with the cms-text data attribute.

ReactHtmlParser provides us with a transformer method. I am using that to convert <div data-cms-text="true"></div> to a Quill component:

<Quill
    onChange={contentUpdated}
    placeholder="Type something... :-)"
    theme={"snow"}
    key="some-uniqiue-key" />

This works!

screen shot 2019-02-12 at 13 12 51

This is what's going wrong The Quill tool bar doesn't respond to anything I do. It's as those events are never registered within the iframe. I have set up a repo here that illustrates the problem: https://github.com/entiendoNull/react-iframe-test

To begin with I figured that this may have been a problem related to the usage react-frame-component and I filed this issue there: https://github.com/ryanseddon/react-frame-component/issues/133

It was then suggested that this is more of a problem related to QuillJS pointing out these two similiar issues: https://github.com/quilljs/quill/issues/1042#issue-182512608, https://github.com/quilljs/quill/issues/1386#issue-218121065

I am using this

"react": "^16.8.1", "react-dom": "^16.8.1", "react-frame-component": "^4.0.2", "react-html-parser": "^2.0.2", "react-quill": "^1.3.3",

This may be a problem that is directly related to just QuillJS, but I thought I'd try my luck here first. Do anyone have an idea how this can be achieved? Or of an alternative solution?

sahidhossen commented 5 years ago

Did you find any solution for iframe?

entiendoNull commented 5 years ago

Hey, well... My solution was unfortunately to skip React-Quill and move on to Slate. I did get that to work without issues.

In my original post I recently received this suggestion however: https://github.com/ryanseddon/react-frame-component/issues/133#issuecomment-471925298

Have a look :)

Sawan1994 commented 4 years ago

@entiendoNull Is slate working fine for you? I am also implementing similar code in my project and I am finding it hard to get my hands on a react inline editor that works properly inside react-frame-component.

Let me know if you found something that's reliable

entiendoNull commented 4 years ago

Hi, yes. I've got that working with Slate. It is a little bit cumbersome in the beginning, but it's worth the effort ;)

Sawan1994 commented 4 years ago

@entiendoNull The github page on slate says that it's in beta mode and there can be breaking changes. won't that be a problem?

zenoamaro / react-quill

Iframe and Quill-React, events are lost #454