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
``

bash

npm install text-editor-react





* Include fontawesome cdn in your html for icons to work (version 5)

https://fontawesome.com/



Usage



$3

jsx

import React from "react";

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



function MyComponent() {

    const id = "my-unique-id";



    return (

                    id={id}        //  required

        />

    );

}

$3

jsx

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 (

        

                            id={id}

            />

            

        

    );

}

$3

jsx

import React, { useEffect } from "react";

import { addContentTo } from "text-editor-react";



function MyComponent() {

    const targetDiv = "target-div";



    const content =

Hello World!

;



    useEffect(() => {

        addContentTo(content, targetDiv);

        //  Provide content and id of the div you want to

        //  add the content to

    }, []);



    return (

        

            

            

        

    );

}





$3



| Name            | Type          | Default           | Description                                                               |

| --------------- | ------------- | ----------------- | ------------------------------------------------------------------------- |

|

 (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

jsx

import React from "react";

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



function MyComponent() {

    const id = "my-unique-id";



    return (

                    id={id}

            showJustify={false} 

            toolItemStyle={{

                color: "red",

                fontSize: "1.2rem"

            }}

        />

    );

}