Javascript 为微型富文本编辑器创建单击弹出窗口

我想在我的代码中实现这个小小的富文本编辑器。以下是编辑器名为TextEditor.js的组件：

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class App extends React.Component {
  handleEditorChange = (content, editor) => {
    console.log('Content was updated:', content);
}

  render() {
    return (
      <Editor
        initialValue="<p>This is the initial content of the editor</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar:
            'undo redo | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | removeformat | help'
        }}
        onEditorChange={this.handleEditorChange}
      />
    );
  }
}

export default App;

从“React”导入React；
从'@tinymce/tinymce-react'导入{Editor}；
类应用程序扩展了React.Component{
handleEditorChange=（内容、编辑器）=>{
console.log（'内容已更新：'，内容）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

下面是我要在其中实现它的文件（dogbail.js）：

import React from 'react'

const DogPaddle = () => {
   return(
 <a onClick={} href="javascript:void(0)">
 </a>
   )
}

export default DogPaddle

从“React”导入React
康斯特狗桨=（）=>{
返回(
)
}
导出默认拨杆

顺便说一句，Dog.js中就是这么叫Dogbaird的

class Home extends Component {
  state = {
     user: {},
     user_data: []
   }
   render() {
    
        return (
        <div>
            <div>
                    <DogPaddle
                    >
                    </DogPaddle>
            </div>
        </div>
        );
  }
}

class Home扩展组件{
状态={
用户：{}，
用户数据：[]
}
render（）{
返回(
);
}
}

所期望的结果是，在单击锚定标记时，能够使用富文本编辑器弹出一个窗口。我还希望能够将富格文本编辑器中的数据传输回dogbail.js。有人能帮我吗？我将不胜感激