Package Exports
- react-richtextbox
- react-richtextbox/build/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-richtextbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
DEMO
Install Package
npm i react-richtextboxThe react-richtextbox npm package provides a powerful and customizable rich text box component for React applications. This component allows users to input and edit text with formatting options, similar to a basic text editor.
Features
Rich Text Editing
Users can apply various text formatting options such as bold, italic, underline, bullet points, numbering, etc., using familiar toolbar buttons.
Customizable Styles
Easily customize the look and feel of the rich text box to match the design of your application.
HTML Content Support:
The component supports both input and output of content in HTML format, making it compatible with other components that use HTML content.
Image Resize:
The component supports inline image height width using mouse drag.
Example
Following toolbar config are default and optional
const defaultoolbarConfig = [
'UNDO',
'REDO',
'BOLD',
'ITALIC',
'UNDERLINE',
'STRICKTHROUGH',
'LEFTALIGN',
'CENTERALIGN',
'RIGHTALIGN',
'JUSTIFYALIGN',
'ORDERLIST',
'UNORDERLIST',
'TEXTCOLOR',
'TEXTBACKGROUNDCOLOR',
'HYPERLINK',
'IMAGE',
'FONTSIZE'
];import React from "react";
import React from "react";
import Richtextbox from "react-richtextbox";
const onChange = (htmlData) => {
console.log(htmlData)
}
const toolbarConfig = [
'UNDO',
'REDO',
'BOLD',
'ITALIC',
'UNDERLINE',
'STRICKTHROUGH',
'LEFTALIGN',
'CENTERALIGN',
'RIGHTALIGN',
'JUSTIFYALIGN',
];
function App() {
return (
<>
<Richtextbox
height={250} // optional
width={600} // optional
initialValue={`<h1>react-richtextbox<h1/>`} // optional
toolbarConfig={toolbarConfig} // optional
onChange={onChange} //optional
/>
</>
);
}
export default App;