scribe-plugin-toolbar in iframe

[axclever]

Hi guys. Have a problem with using 'scribe-plugin-toolbar' in iframe. Toolbar with my buttons always disabled.

command.queryEnabled() always return false.

Help please.

[rrees]

Hi there, do you have some example code that illustrates the problem?

[axclever]

I am using reactjs + webpack FRAME is't 'react-frame-component' npm package 'scribe-editor'

My render function.

render(){
        return <Frame ref="iframeContainer">
            <div ref="toolbar" className="toolbar">
                <button data-command-name="bold" className="bold-btn">B</button>
                <button data-command-name="italic" className="italic-btn">I</button>
                <button data-command-name="underline">U</button>
            </div>

            <div className="wysiwyg-workspace" contentEditable="true" ref="scribe" />

            <div className="editor-buttons">
                <EditorButton handler={this.handleCancel} />
                <EditorButton type="red" handler={this.handleSave} />
            </div>

        </Frame>
    }

Scribe initialisation:

componentDidMount(){
        var scribeElement = this.refs.scribe.getDOMNode();
        var scribe = new Scribe(scribeElement);
        var toolbarElement = this.refs.toolbar.getDOMNode();
        scribe.use(scribePluginToolbar(toolbarElement));
    },

I have no errors, or something like that. Formatting with <p> are works good for me. But not toolbar :(

@rrees Thanks for replying)

[axclever]

@rrees oh.. just forgot.. scribe not works in the iframe. I've tested separately (without ifame), and all works fine.

[rrees]

Okay, glad you were able to sort out the cause.

[axclever]

@rrees Sorry, can you help me with iframe? Why editor isn't work?)

[axclever]

@rrees just to clarify I wasn't able to solve the issue. So again I'm seeking help in getting Scribe to work in an iFrame. As discussed earlier, everything works fine outside of the iframe; however, implementing the editor inside an iframe causes most functions to stop working. As far as I can see only text formatting seems to work inside an iframe.

Can you please advise on best implementation inside an iframe.

thanks in advance

[rrees]

The issue is that Scribe directly interacts with things like document and window. See this PR that solved the problem at the cost of other issues.

Scribe doesn't currently support being embedded in an iframe.