text-editor-react

A text editor for react with parser to save content to database and render using provided function. The package provides options for bold, italics, underline, add link, justify content, undo, redo and 6 headings.

All the buttons and textfield are fully customizable with minimal styles preapplied to get you started.

The buttons can be removed as per user needs.

• Demo Project
• Demo Website

Installation and Setup

• Install text-editor-react

npm install text-editor-react

• Include fontawesome cdn in your html for icons to work (version 5) https://fontawesome.com/

Usage

Simple Example

import React from "react";
import { TextEditor } from "text-editor-react";

function MyComponent() {
    const id = "my-unique-id";

    return (
        <TextEditor
            id={id}        //  required
        />
    );
}

How to save content?

import React from "react";
import { TextEditor, getInnerHtml } from "text-editor-react";

function MyComponent() {
    const id = "my-unique-id";

    const saveContent = () => {
        const content = getInnerHtml(id);
        // This is the part where you save the content
        // to the database
    };

    return (
        <div>
            <TextEditor
                id={id}
            />
            <button onClick={saveContent}>Save</button>
        </div>
    );
}

How to render content saved in database?

import React, { useEffect } from "react";
import { addContentTo } from "text-editor-react";

function MyComponent() {
    const targetDiv = "target-div";

    const content = `<p>Hello World!</p>`;

    useEffect(() => {
        addContentTo(content, targetDiv);
        //  Provide content and id of the div you want to
        //  add the content to
    }, []);

    return (
        <React.Fragment>
            <div id={targetDiv}></div>
            <button onClick={addContent}>Add Content</button>
        </React.Fragment>
    );
}

Props

| Name | Type | Default | Description | | --------------- | ------------- | ----------------- | ------------------------------------------------------------------------- | | id (required) | string | react-text-editor | An id unique to your application | | showHeadings | boolean | true | Visibility of the heading buttons | | showUndoRedo | boolean | true | Visibility of the undo and redo buttons | | showJustify | boolean | true | Visibility of the justify content buttons. Center, left and right aligned | | toolbarStyle | object | | Add styling to the toolbar div | | toolItemStyle | object | | Add styling to the buttons in toolbar div | | editorStyle | object | | Add styling to the editor textfield |

Props example

import React from "react";
import { TextEditor } from "text-editor-react";

function MyComponent() {
    const id = "my-unique-id";

    return (
        <TextEditor
            id={id}
            showJustify={false} 
            toolItemStyle={{
                color: "red",
                fontSize: "1.2rem"
            }}
        />
    );
}