Verbum - Rich Text Editor For React
source link: https://dev.to/ozanyurtsever/verbum-rich-text-editor-for-react-1ia1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Verbum - Rich Text Editor For React
Until this year, draft.js was one of the mainly used libraries out there for building web based text editors, and there are lots of component libraries for React based on draft.js. However, the development team(which is facebook) has announced that the project is not under development anymore, since they have started a brand new project, which is Lexical. Lexical is a framework to build text editors and is under early development currently. By using Lexical, I have built a new component library that comes with a ready to use rich text editor. It is under very early development as well, as I am trying to make it more modular and flexible with each improvement. I hope this project can help some startups that needs to implement a highly functional text editor to their projects. All of the support(like stars) and contribution to the project is very much welcomed.
ozanyurtsever
/
verbum
Verbum is a fully flexible text editor based on lexical framework.
Verbum
Verbum - Flexible Text Editor for React
Verbum is a fully flexible text editor based on lexical framework.
⚠️ As the Lexical framework is currently in early development, this component library is also likely to change quite often
Installation
npm install verbum --save
Live demo is coming soon...
Usage
import { FC } from 'react';
import { EditorComposer, Editor, ToolbarPlugin } from 'verbum';
const NoteViewer: FC = () => {
return (
<EditorComposer>
<Editor hashtagsEnables={true}>
<ToolbarPlugin defaultFontSize="20px">
<InsertDropdown enablePool={true} />
<AlignDropdown />
<ToolbarPlugin />
</Editor>
</EditorComposer>
);
};
export default NoteViewer;<Editor />
| Property | Type | description | |
|---|---|---|---|
| children | ReactNode |
optional | Nested child components, like the ToolbarPlugin. |
| hashtagsEnabled | boolean |
optional | Enables |
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK