How To Add HTML Editor In React

In this article, we will learn how to use Editor in React. We will use suneditor-react package.

First of all, we have create React application and then add a suneditor-react package in react project.

Install suneditor-react,

npm install suneditor-react

Now open your main js file or App.js file and add the below imports there.

import React from 'react';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';

HTML content as below:

<SunEditor />

Add properties and Events:

-Editor name, placeholder, and default value:

<SunEditor 
    name="myeditor"
    placeholder="Type somthing here..."
    defaultValue="<h1>Ravishaa</h1>"
/>

– set editor width and height

<SunEditor width="400px" height="400px"/>

– hide and disable properties

<SunEditor
        // Disable Editor
        disable={true}
        // Hide Editor
        hide={true}
        // Hide Editor Toolbar
        hideToolbar={true}
        // Disable Editor Toolbar
        disableToolbar={true}
/>

-Events

// Get the content Inside
const onChangeEvent = (content) => {
    console.log(content);
}
// Get the scroll Event
const onScrollEvent = (event) => {
    console.log(event);
}

// Get the click Event
const onClickEvent = (event) => {
    console.log(event);
}
// Get the Mousedown event
const onMouseDownEvent = (event) => {
    console.log(event);
}

// Get the keyup Event
const onKeyUpEvent = (event) => {
    console.log(event);
}
//Get the focus event
const onFocusEvent = (event) => {
    console.log(event);
}

//html content
<SunEditor
onChange={ onChangeEvent }
onScroll = { onScrollEvent }
onClick = { onClickEvent }
onMouseDown = { onMouseDownEvent }
onKeyUp = { onKeyUpEvent }
onFocus = { onFocusEvent }
/>

– customize toolbar

<SunEditor
        setOptions={{
          buttonList: [
            ["undo", "redo"],
            ["font", "fontSize", "formatBlock"],
            ["paragraphStyle", "blockquote"],
            ["bold", "underline", "italic", "strike", "subscript", "superscript"],
            ["fontColor", "hiliteColor", "textStyle"],
            ["removeFormat"],
            ["outdent", "indent"],
            ["align", "horizontalRule", "list", "lineHeight"],
            ["table", "link", "image", "video", "audio"],
            ["imageGallery"],
            ["fullScreen", "showBlocks", "codeView"],
            ["preview", "print"],
            ["save", "template"]
          ],
        }}
 />

My page will look like this

import './App.css';
import React, { useState } from 'react';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';
function App() {

  const [contents, setcontents] = useState();

  const onChangeEvent = (content) => {
    console.log(content);
    setcontents(content)
  }
  const onScrollEvent = (event) => {
    console.log(event);
  }
  const onClickEvent = (event) => {
    console.log(event);
  }
  const onMouseDownEvent = (event) => {
    console.log(event);
  }
  const onKeyUpEvent = (event) => {
    console.log(event);
  }
  const onFocusEvent = (event) => {
    console.log(event);
  }
  return (
    <>
      <SunEditor
        name="myeditor"
        placeholder="Type somthing here..."
        defaultValue="<h1>Hello My Name is Ravisha...</h1>"
        onChange={onChangeEvent}
        onScroll={onScrollEvent}
        onClick={onClickEvent}
        onMouseDown={onMouseDownEvent}
        onKeyUp={onKeyUpEvent}
        onFocus={onFocusEvent}
        setOptions={{
          buttonList: [
            ["undo", "redo"],
            ["font", "fontSize", "formatBlock"],
            ["paragraphStyle", "blockquote"],
            ["bold", "underline", "italic", "strike", "subscript", "superscript"],
            ["fontColor", "hiliteColor", "textStyle"],
            ["removeFormat"],
            ["outdent", "indent"],
            ["align", "horizontalRule", "list", "lineHeight"],
            ["table", "link", "image", "video", "audio"],
            ["imageGallery"],
            ["fullScreen", "showBlocks", "codeView"],
            ["preview", "print"],
            ["save", "template"]
          ],
        }}
      />

    </>
  );
}
export default App;