0

I want to implement the Tiny rich text editor into my code. Here is the component called TextEditor.js for the editor:

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;

Here is the file (DogPaddle.js) where I want to implement it in:

import React from 'react'

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

export default DogPaddle

BTW this is how DogPaddle is called in Dog.js

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

The desired outcome is to be able to have a popup with the rich text editor upon clicking the anchor tag. I also want to be able to transmit the data from the rich text editor back to DogPaddle.js. Can anyone help me out? I would greatly appreciate it.

1 Answer 1

0

use onChange

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.