A react text editor with parser to add and retrieve content from database. The package provides options for bold, italics, underline, add link, justify content, undo, redo and 6 headings.
npm install text-editor-reactbash
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 |
| --------------- | ------------- | ----------------- | ------------------------------------------------------------------------- |
| 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
`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"
}}
/>
);
}
``