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;
