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

App.jsx`

import React, { useRef } from "react";
import SunEditor from "suneditor-react";
import "suneditor/dist/css/suneditor.min.css"; // Import SunEditor CSS

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

  return (
    <div style={{ width: "90%", margin: "auto", marginTop: "20px" }}>
      <h1 style={{ textAlign: "center" }}>SunEditor React Example</h1>
      <SunEditor
        ref={editorRef}
        setOptions={{
          height: 300,
          buttonList: [
            ["undo", "redo", "formatBlock", "bold", "italic", "underline", "strike"],
            ["fontSize", "fontColor", "hiliteColor", "align", "list", "link", "image", "video"],
            ["removeFormat", "preview", "codeView"],
          ],
          placeholder: "Start typing here...",
          charCounter: true,
        }}
        defaultValue="Welcome to SunEditor!"
      />
     
    </div>
  );
};

export default App;

import React, { useRef } from "react";

import SunEditor from "suneditor-react";

import "suneditor/dist/css/suneditor.min.css"; // Import SunEditor CSS

const App = () => {

const editorRef = useRef(null);

return (

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

<SunEditor

ref={editorRef}

setOptions={{

height: 300,

buttonList: [

["undo", "redo", "formatBlock", "bold", "italic", "underline", "strike"],

["fontSize", "fontColor", "hiliteColor", "align", "list", "link", "image", "video"],

["removeFormat", "preview", "codeView"],

placeholder: "Start typing here...",

charCounter: true,

}}

defaultValue="Welcome to SunEditor!"

</div>

);

};

export default App;

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

Comments

Leave a Reply Cancel reply

Archives