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

问题描述

我想在我的代码中实现 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

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

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）