How To Do TinyMCE React Integration [Easy Step By Step Guide]

 

import { Editor } from “@tinymce/tinymce-react”;

 

export default function App() {

  return (

    <>

      <Editor

        tinymceScriptSrc={process.env.PUBLIC_URL + “/tinymce/tinymce.min.js”}

        initialValue=“<p>This is the initial content of the editor.</p>”

        init={{

          height: 500,

          width: “100%”,

          menubar: false,

          plugins: [

            “advlist”,

            “autolink”,

            “lists”,

            “link”,

            “image”,

            “charmap”,

            “anchor”,

            “searchreplace”,

            “visualblocks”,

            “code”,

            “fullscreen”,

            “insertdatetime”,

            “media”,

            “table”,

            “preview”,

            “help”,

            “wordcount”,

          ],

          toolbar:

            “undo redo | blocks | “ +

            “bold italic forecolor | alignleft aligncenter “ +

            “alignright alignjustify | bullist numlist outdent indent | “ +

            “removeformat | help”,

          content_style:

            “#your_editor { font-family:Helvetica,Arial,sans-serif; font-size:35px }”,

        }}

      />

    </>

  );

}