Build a React.js TinyMCE WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using JSX

App.jsx

import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

const App = () => {
  const editorRef = useRef(null);

  const handleShowContent = () => {
    if (editorRef.current) {
      const content = editorRef.current.getContent();
      document.getElementById("editor-preview").innerHTML = content;
    }
  };

  return (
    <div style={{ width: "90%", margin: "auto", marginTop: "20px" }}>
      <h1 style={{ textAlign: "center" }}>TinyMCE React Example</h1>
      <Editor
        apiKey="your-tinymce-api-key" // Optional: Get a free API key from https://www.tiny.cloud/
        onInit={(evt, editor) => (editorRef.current = editor)}
        initialValue="<p>Welcome to TinyMCE!</p>"
        init={{
          height: 300,
          menubar: false,
          plugins: [
            'a11ychecker',
            'advlist',
            'advcode',
            'advtable',
            'autolink',
            'checklist',
            'export',
            'lists',
            'link',
            'image',
            'charmap',
            'preview',
            'anchor',
            'searchreplace',
            'visualblocks',
            'powerpaste',
            'fullscreen',
            'formatpainter',
            'insertdatetime',
            'media',
            'table',
            'help',
            'wordcount',
          ],
          toolbar:
            'undo redo | image | preview | casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
          placeholder: "Start typing here...",
        }}
      />
      <button
        id="show-content"
        style={{ marginTop: "10px", padding: "10px 20px", display: "block", marginLeft: "auto", marginRight: "auto" }}
        onClick={handleShowContent}
      >
        Show HTML Content
      </button>
      <div
        id="editor-preview"
        style={{ border: "1px solid #ccc", marginTop: "20px", padding: "10px" }}
      ></div>
    </div>
  );
};

export default App;

import React, { useRef } from "react";

import { Editor } from "@tinymce/tinymce-react";

const App = () => {

const editorRef = useRef(null);

const handleShowContent = () => {

if (editorRef.current) {

const content = editorRef.current.getContent();

document.getElementById("editor-preview").innerHTML = content;

}

};

return (

<h1 style={{ textAlign: "center" }}>TinyMCE React Example</h1>

<Editor

apiKey="your-tinymce-api-key" // Optional: Get a free API key from https://www.tiny.cloud/

onInit={(evt, editor) => (editorRef.current = editor)}

initialValue="<p>Welcome to TinyMCE!</p>"

init={{

height: 300,

menubar: false,

plugins: [

'a11ychecker',

'advlist',

'advcode',

'advtable',

'autolink',

'checklist',

'export',

'lists',

'link',

'image',

'charmap',

'preview',

'anchor',

'searchreplace',

'visualblocks',

'powerpaste',

'fullscreen',

'formatpainter',

'insertdatetime',

'media',

'table',

'help',

'wordcount',

toolbar:

placeholder: "Start typing here...",

}}

<button

id="show-content"

style={{ marginTop: "10px", padding: "10px 20px", display: "block", marginLeft: "auto", marginRight: "auto" }}

onClick={handleShowContent}

Show HTML Content

</button>

<div

id="editor-preview"

style={{ border: "1px solid #ccc", marginTop: "20px", padding: "10px" }}

></div>

</div>

);

};

export default App;

Build a React.js TinyMCE WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using JSX

Comments

Leave a Reply Cancel reply

Archives