React.js suneditor-react SunEditor WYSIWYG Editor to Embed Images,Text,Video & Audio in Javascript

Welcome folks today in this blog post we will be rendering the WYSIWYG editor in browser using the suneditor-react library in react.js using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below libraries using the below command as shown below

npm i suneditor

npm i suneditor-react

And after that you will see the below directory structure of the react.js app as shown below

And now you need to go to App.js file and copy paste the following code

App.js

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

export default function App() {
 
  return (
    <div className="App" style={{ position: "relative" }}>
      <p> My Other Contents </p>
      <SunEditor />
    </div>
  );
}

import "./styles.css";

import SunEditor from 'suneditor-react';

import 'suneditor/dist/css/suneditor.min.css';

export default function App() {

return (

<p> My Other Contents </p>

</div>

);

}

As you can see we are importing the suneditor and suneditor-react libraries at the top and then we are rendering the suneditor component. Now you will see the below result as shown below

Adding Custom Options to Editor

Now we will be adding some custom options to the editor as shown below

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

export default function App() {
 
  return (
    <div className="App" style={{ position: "relative" }}>
      <p> My Other Contents </p>
      <SunEditor
      lang="en"
      width="100%"
      height="100%"
      autoFocus={true}
      placeholder="Please type here..."
      />
    </div>
  );
}

import "./styles.css";

import SunEditor from 'suneditor-react';

import 'suneditor/dist/css/suneditor.min.css';

export default function App() {

return (

<p> My Other Contents </p>

<SunEditor

lang="en"

width="100%"

height="100%"

autoFocus={true}

placeholder="Please type here..."

</div>

);

}

As you can see we are attaching the placeholder text and also we have attached the width and height and then we are also attaching the autoFocus property to true. And default language for editor is english as shown below

Adding Buttons in Editor

Now we will be adding different button widgets inside the editor to add the image,audio and videos as shown below

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

export default function App() {
 
  return (
    <div className="App" style={{ position: "relative" }}>
      <p> My Other Contents </p>
      <SunEditor
      lang="en"
      width="100%"
      height="100%"
      autoFocus={true}
      placeholder="Please type here..."
      setOptions={{
        buttonList:[
          [
            "bold",
            "underline",
            "table",
            "image",
            "video",
            "audio"
          ]
        ]
      }}
      />
    </div>
  );
}

import "./styles.css";

import SunEditor from 'suneditor-react';

import 'suneditor/dist/css/suneditor.min.css';

export default function App() {

return (

<p> My Other Contents </p>

<SunEditor

lang="en"

width="100%"

height="100%"

autoFocus={true}

placeholder="Please type here..."

setOptions={{

buttonList:[

[

"bold",

"underline",

"table",

"image",

"video",

"audio"

]

}}

</div>

);

}