nytimes / ice

track changes with javascript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question: How would I use this with react-tinymce

andrewhl opened this issue · comments

I'm using react-tinymce with a create-react-app application. I would love to use this plugin, but I'm not quite sure how to integrate it.

I've tried downloading the source and loading it in as follows:

    <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=..."></script>
    <script src="/ice.min.js" />

and in my react component implementation:

            <TinyMCE
                content={this.props.content}
                config={{
                    plugins: ['ice'],
                    height: 400,
                }}
                onChange={(e) => handleEditorChange(e, this.props)}
            />

but I get the following error:

Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at tinymce.min.js?apiKey=...:43
(anonymous) @ tinymce.min.js?apiKey=...:43
setTimeout (async)
jsFontsKey @ tinymce.min.js?apiKey=...:43
fontsKey @ tinymce.min.js?apiKey=...:43
get @ tinymce.min.js?apiKey=..:43
(anonymous) @ tinymce.min.js?apiKey=..:44
d @ tinymce.min.js?apiKey=...:44
requestFingerprint @ tinymce.min.js?apiKey=...:44
g @ tinymce.min.js?apiKey=...:44
d @ tinymce.min.js?apiKey=...:44
fold @ tinymce.min.js?apiKey=...:43
(anonymous) @ tinymce.min.js?apiKey=...:44
(anonymous) @ tinymce.min.js?apiKey=...:44
(anonymous) @ tinymce.min.js?apiKey=...:44
invariant.js:42 Uncaught Error: Target container is not a DOM element.
    at invariant (invariant.js:42)
    at renderSubtreeIntoContainer (react-dom.development.js:17059)
    at Object.render (react-dom.development.js:17129)
    at Object../src/index.js (index.js:26)
    at __webpack_require__ (bootstrap bc887c91ff9f47c0e6d2:659)
    at fn (bootstrap bc887c91ff9f47c0e6d2:85)
    at Object.0 (dataURItoBlob.js:26)
    at __webpack_require__ (bootstrap bc887c91ff9f47c0e6d2:659)
    at ./node_modules/ansi-regex/index.js.module.exports (bootstrap bc887c91ff9f47c0e6d2:708)
    at bundle.js:712

dont use react-tinymce, because it supported only tinymce 4xx version