CODEWITHSUNDEEP
reactjstinymce
CreativeDesign
CreativeDesign

Reputation: 101

Transfer text editor content to another text editor on a separate page

Specs:

I need to be able to transfer Rich text editor content from TextEditor1 to TextEditor2. These text editors exist on two separate pages in a React Router Web App. On Page1 the user inputs content to TextEditor1 and presses submit. OnSubmit I need TextEditor2 to be set with the content from TextEditor1.TextEditor2 is for displaying the user input while preserving spacing and format.

Status:

I'm currently able to assign the TextEditor1's content to a variable with setEntryArray(editorRef.current.getContent()); but I'm not able access this variable from within my TextEditor2 component. I'm using the TinyMCE text editor.

Outlook:

I was wondering if it is possible to lift the state up from one editor to the next. I'm not sure how you could pass props from one component to the next with TextEditor2 being just a variable assigned to a text editor. The editor components can not be children of the same parent because the editor receiving the content from the other editor would need to be imported into it's page and that is not possible unless it is it's own component as far as I know.

If lifting state isn't possible for this scenario, I know there might be other ways to accomplish this. I'm not familiar with the useReducer hook or Redux but I know they serve a similar purpose and might be a potential solution. I just need to figure out how to implement them if they're a better fix. I'm looking for the simplest solution and just trying to find the best direction to go in while also trying to learn in the process.

I've been stuck on this and I really appreciate any ideas! Thank you for your time!

 export default function App() {
  const editorRef = useRef();
  const [entryArray, setEntryArray] = React.useState();
  const log = () => {
    if (editorRef.current) {
      setEntryArray(editorRef.current.getContent());
      console.log(entryArray);
    }
  };



let help = null
export let storyEdi = <Editor
    apiKey='your-api-key'
    disabled = {true}
    inline = {false}
    
    init={{
      selector: "#storyEdi",
      height: 500,
      menubar: false,
      placeholder: "Whats on your mind?",
      init_instance_callback : function(editor) {
        if (help == null) {
          editor.setContent("EMPTY ENTRY");
        }
       /* else {
            editor.setContent(entryArray);}*/
      },

      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
      ],
      toolbar:  'undo redo | blocks | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }}

    />

Upvotes: 0

Views: 512

Answers (1)

Avkash
Avkash

Reputation: 524

I have used TinyMCE editor in one of my react projects

Here's how I had integrated. And also you can create 2 different Editor inside the same component. If you are wondoring how!, let me show you.

helper.js

import { Editor } from "@tinymce/tinymce-react";
  
  const editorInit = {
    height: 300,
    width: "100%",
    menubar: "edit view insert format help",
    toolbar:
      "undo redo | formatselect | " +
      "bold italic forecolor backcolor | alignleft aligncenter ",
    toolbar_sticky: true,
    toolbar_mode: "sliding",
    content_style: "body { font-family:Montserrat; font-size:14px }",
  };

  const getHtmlEditor = (value, setFieldValue, innerRef) => (
    <Editor
      onInit={(evt, editor) => (innerRef.current = editor)}
      initialValue={ value /* Initial data value here */}
      onEditorChange={(e) => {
        /* Set your value here, I have used formik here */
        setFieldValue("formField", e);
      }}
      init={editorInit}
    />
  );
  
  export default getHtmlEditor;

Now import this function in your component. Just make sure you create different Ref for each of the editor.

import getHtmlEditor "..path";
import htmlParser from "html-react-parser";

export default function YourComponent(){
  const [formValue, setFieldValue]=useForm(); // Any form data integration
  
  const editorOneRef=useRef(null); 
  const editorTwoRef=useRef(null); // new ref for each TinyMCE text editor
  
  return (
    <div>
      {getHtmlEditor(formValue, setFieldValue, editorOneRef);}
      {getHtmlEditor(formValue, setFieldValue, editorTwoRef);}
      {/* You can add as many as you want */}
      {/* If you want to display content as HTML with output text (with design), you can also use html-react-parser npm eg. as follow */}
      <div className="someContainerClass" >
        {htmlParser(formValue)}
      </div>
    </div>
  );
}

Let me know if this is helpful for you! Thank you.

Upvotes: 1

Related Questions