bounty还有2天到期。回答此问题可获得+50声望奖励。Luke希望引起更多关注这个问题。

我正在尝试初始化TinyMCE，并将其编写为React组件。使用下面的代码，编辑器呈现，但10秒后显示以下错误：

tinymce can only be initialised when in a document
    at Editor._this.initialise (http://localhost:4052/bundle.js:89548:27)
    at http://localhost:4052/bundle.js:89544:59

使用npm包`@tinymce/tinymce-react '，并遵循设置指南，我生成了以下组件：

import React, { useEffect, useRef, useState } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import { Box, Button } from '@mui/material'

const TinyMCE = ({ initialValue, onSubmit }) => {
  const [loaded, setLoaded] = useState(false)
  const [value, setValue] = useState(initialValue ?? '<p></p>')
  useEffect(() => {
    setLoaded(true)
  }, [])
  const editorRef = useRef(null)

  const handleChange = (e) => setValue(e.content)

  const handleSubmit = () => console.log(value)

  return (
    <Box>
      <Box id="tinymceeditor" />
      <Editor
        value={value}
        onEditorChange={handleChange}
        apiKey="*****"
        init={{
          selector: 'tinymceeditor',
          plugins: 'advlist code emoticons link lists table',
          toolbar: 'bold italic | bullist numlist | link emoticons',
          height: 300
        }}
      />
      <Button variant="contained" color="primary" onClick={handleSubmit}>
        Submit
      </Button>
    </Box>
  )
}

export default TinyMCE

npm包在10秒后抛出错误，从这里开始：

_this.initialise = function (attempts) {
            var _a, _b, _c;
            if (attempts === void 0) { attempts = 0; }
            var target = _this.elementRef.current;
            if (!target) {
                return; // Editor has been unmounted
            }
            if (!(0, Utils_1.isInDoc)(target)) {
                // this is probably someone trying to help by rendering us offscreen
                // but we can't do that because the editor iframe must be in the document
                // in order to have state
                if (attempts === 0) {
                    // we probably just need to wait for the current events to be processed
                    setTimeout(function () { return _this.initialise(1); }, 1);
                }
                else if (attempts < 100) {
                    // wait for ten seconds, polling every tenth of a second
                    setTimeout(function () { return _this.initialise(attempts + 1); }, 100);
                }
                else {
                    // give up, at this point it seems that more polling is unlikely to help
                    throw new Error('tinymce can only be initialised when in a document');
                }
                return;
            }

虽然我找不到完全相同的错误的任何例子，我认为这与初始化有关。我尝试过只在父组件安装后才呈现组件。
Editor组件接受oninit参数。我已经尝试使用这个来更新ref onInit={(evt, editor) => (editorRef.current = editor)}，但这并不影响抛出的错误。
一个论坛建议它是webpack，所以我根据他们的建议包括了MiniCssExtractPlugin。以下是我的webpack配置：

module.exports = {
    entry: {
        app: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.(ts|js|jsx)x?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/env']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: ['file-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    plugins: [
        new Dotenv(),
        new HtmlWebpackPlugin({
            template: './src/assets/index.html',
            favicon: './src/assets/images/icons/favicons/favicon.ico',
            meta: {viewport: 'width=device-width, initial-scale=1'}
        }),
        new MiniCssExtractPlugin()
    ],
}

任何帮助都将非常感激！