- Color Text
- Bold
- Italic
- Underline
- Strikethrough
- Quote
- Heading (1,2...5)
- Code
- Checklist
- Copy from html
- Text Align
- Mention
- Ordered List
- Unordered List
- Nested List
- Indent (Increase, Decrease)
Demo Link: https://codesandbox.io/s/example-rara-rte-dumskc
-
Install @raralabs/rara-rte
npm i @raralabs/rara-rte
-
Import component and style and use it in your code
import {RaraEditor} from '@raralabs/rara-rte'; import '@raralabs/rara-rte/dist/rara-rte.css' import { useState } from 'react'; export default function App() { const [value,setValue]=useState(null) return ( <div className=""> <h1>Rara Rich Text Editor</h1> <RaraEditor value={value} onChange={(v)=>{ setValue(v); }} /> </div> ); }
Name | Description | Default |
---|---|---|
value | string |
- |
onChange | ((val: string) => void) |
- |
readOnly | boolean |
false |
onCheckboxChange | ((checked: boolean, value: string) => void) |
- |
onMentionQuery | ((query: string) => Promise<MentionItemProps[]>) |
- |
mentionItemRenderer | ((mentionOptionItem: MentionItemProps) => ReactNode) |
- |
mentionOptionRenderer | ((mentionOptionItem: MentionItemProps) => ReactNode) |
- |
RTE is MIT Licensed