React Text Editor Kit

React Text Editor Kit is a customizable rich text editor component for React applications. It provides a flexible and easy-to-use interface for users to create and edit content with various formatting options. And also easy to integrate in react applications.

Installation

npm i react-text-editor-kit

Or Using Yarn

yarn add react-text-editor-kit

Live Demo

To test React Text Editor Kit on CodeSandbox, click here.

Simple Usage

import { useState } from "react";
import ReactEditor from "react-text-editor-kit";

function App() {
  const [value, setValue] = useState("");

  const handleChange = (value) => {
    setValue(value);
  };

  const image_handler = async (e) => {
    let requestObj = {
      method: "POST",
      url: "your-api-end-point",
      headers: {}, // attach required headers
    };
    let formData = new FormData();
    formData.append("image", e.image);
    formData.append("width", "600");
    requestObj["data"] = formData;
    try {
      let results = await axios(requestObj);
      if (results.data.code === 200) {
        return results.data.image_path;
      } else {
        return "";
      }
    } catch (error) {
      return "";
    }
  };

  const get_editor_ref = (value) => {};

  return (
    <div className="App">
      <ReactEditor
        value={value}
        getEditorRef={get_editor_ref} //if you want to get ref of editor
        onChange={handleChange}
        mainProps={{ className: "red" }} // these props with b used to most parent div of the editor
        placeholder="Write your text here"
        apiKey={process.env.REACT_APP_EDITOR_API_KEY} // required: set to your editor API key (see "API Key" section)
        // image_handler={image_handler} // if you want to upload image on your server
      />
    </div>
  );
}

export default App;

### API Key

The editor requires an API key to run. Pass the key via the `apiKey` prop on the `ReactEditor` component. For local development with Create React App put the key in an `.env` file:

```text
REACT_APP_EDITOR_API_KEY=your_api_key_here

Then use the environment variable in your code:

<ReactEditor apiKey={process.env.REACT_APP_EDITOR_API_KEY} ... />

• Keep the API key secret; don't commit it to Git. Use CI/CD secrets for automated deployments.
• If apiKey is missing the editor may refuse to initialize or run with limited functionality depending on your server setup.

## Toolbar and Navbar Customization

if you want to customise toolbar and navbar you can use selected options as you want

```tsx
const navbar = [
  {
    name: "file",
    options: ["new_document", "preview", "print"],
  },
  {
    name: "view",
    title: "View",
    options: ["source_code", "full_screen"],
  },
  {
    name: "insert",
    title: "insert",
    options: ["image", "link", "video", "hr_line", "special_char"],
  },
  {
    name: "format",
    title: "format",
    options: [
      "bold",
      "italic",
      "underline",
      "superscript",
      "subscript",
      "font",
      "font_size",
      "alignment",
    ],
  },
  "|",
  "select_all",
  "|",
  "image",
  "link",
  "video",
  "|",
  "copy",
  "cut",
  "paste",
  "|",
];

const toolbar = [
  "undo",
  "redo",
  "|",
  "format",
  "fontfamily",
  "fontsize",
  "|",
  "bold",
  "italic",
  "underline",
  "superscript",
  "subscript",
  "|",
  "alignment",
  "alignLeft",
  "alignCenter",
  "alignRight",
  "alignJustify",
  "|",
  "indent",
  "outdent",
  "|",
  "orderedList",
  "unorderedList",
  "|",
  "removeFormat",
  "|",
  "textColor",
  "backgroundColor",
  "|",
  "ltr",
  "rtl",
  "|",
  "select_all",
  "|",
  "image",
  "link",
  "video",
  "|",
  "copy",
  "cut",
  "paste",
  "|",
  "source_code",
  "full_screen",
  "special_character",
  "horizontal_line",
];

<ReactEditor
  value={value}
  onChange={setValue}
  navbar={navbar}
  toolbar={toolbar}
/>;

if you want to show all child options in navbar you should not have to pass options array. You can use it like

const navbar = [
  {
    name: "file",
    title: "File", // if you want to show title of the file function yourself
    icon: "<File/>", // if you want to show icon of the file function yourself
  },
  //  ...Other options
];

// Or So simple like
const navbar = ["file"]; // if you not need to customise title or icon

if you need customization in toolbar you can also do that just like

const handleClick = (item) => {
  console.log(item, "item");
};

const navbar = [
  {
    name: "undo",
    title: "Undo it", // if you want to show title of the file function yourself
    icon: "<Undo/>", // if you want to show icon of the file function yourself
    handleClick: handleClick, // if you need click function to do something but in this case handleClick will prevent the functionality that means now you have to perform functionality yourself but you also want functionality then you need to pass an extra paramter add_functionality just like below
    add_functionality: true,
  },
  //  ...Other optiosn
];

Removing options from toolbar and navbar

if you want to remove some of the options you can use remove_from_toolbar and remove_from_navbar as given below

<ReactEditor
  value={value}
  onChange={setValue}
  remove_from_toolbar={[
    "bold",
    { name: "format", options: ["h1"] }, //options you want to remove from format dropdown
  ]}
  remove_from_navbar={[
    "select_all", //options you want to remove
    { name: "view", options: ["source_code"] }, //options you want to remove from view dropdown
  ]}
/>

Theme Configuration

if you want to change it's theme you can use given css variables

let theme_config = {
  "background-color": "#fff",
  "border-color": "#c4c4c4",
  "text-color": "#414141",
  "toolbar-button-background": "#fff",
  "toolbar-text-color": "#414141",
  "toolbar-button-hover-background": "#efefef",
  "toolbar-button-selected-background": "#dee0e2",
  "svg-color": "#414141",
  "save-button-background": "rgb(9, 134, 62)",
};
<ReactEditor value={value} onChange={setValue} theme_config={theme_config} />;

Support

• Bug Reports

Author

Meta Dev Zone – @meta-dev-zone