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

Question

我想在我的代码中实现 Tiny 富文本编辑器。这是编辑器的名为 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;

这是我要在其中实现它的文件 (DogPaddle.js)：

import React from 'react'

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

export default DogPaddle

顺便说一句，这就是 DogPaddle 在 Dog.js 中的调用方式

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

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

Answer 1

使用 onChange

onChange={(value, editor) => {
                editor
                  .getBody()
                  .getElementsByTagName('a')
                  .item(0)
                  ?.addEventListener('click', () => {
                    console.log('123213');
                  });
              }}