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

App.jsx

import React, { useState, useRef, useMemo } from 'react';
import JoditEditor from 'jodit-react';

const App = ({ placeholder }) => {
  const editor = useRef(null);
  const [content, setContent] = useState('');

  const config = useMemo(() => ({
    readonly: false, // all options from https://xdsoft.net/jodit/docs/,
    placeholder: placeholder || 'Start typing...',
  }), [placeholder]);

  return (
    <JoditEditor
      ref={editor}
      value={content}
      config={config}
      tabIndex={1} // tabIndex of the editor
      onBlur={newContent => setContent(newContent)} // Update content on blur for performance reasons
      onChange={newContent => setContent(newContent)} // Optional: handle changes in real-time
    />
  );
};

export default App;

import React, { useState, useRef, useMemo } from 'react';

import JoditEditor from 'jodit-react';

const App = ({ placeholder }) => {

const editor = useRef(null);

const [content, setContent] = useState('');

const config = useMemo(() => ({

readonly: false, // all options from https://xdsoft.net/jodit/docs/,

placeholder: placeholder || 'Start typing...',

}), [placeholder]);

return (

<JoditEditor

ref={editor}

value={content}

config={config}

tabIndex={1} // tabIndex of the editor

onBlur={newContent => setContent(newContent)} // Update content on blur for performance reasons

onChange={newContent => setContent(newContent)} // Optional: handle changes in real-time

);

};

export default App;

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

Comments

Leave a Reply Cancel reply

Archives