Despite various options available for rich text editing in html, it continues to be extremely challenging area. I found prosemirror to be the best available solution for the problem. It is great work by author Marijn Haverbeke.
Making an editor ground up from a framework is still much work, the project aims at building components for rich text editing using prosemirror. These components can be quickly integrated into react or even non-react applications.
Nib not only has good rich text editing capabilities but also addresses complex editing requirements like tracking changes made to a document, adding comments in document, collaborative editing and more...
Setup of the editor is quite straight forward. It is required to be installed from npm
.
Either npm
or yarn
commands can be used.
npm i nib-core --save
import React from "react";
import Editor from "nib-core";
const MyEditor = () => <Editor />;
Please note that the lib does not work server side.
Props supported by the editor.
S.No. | Name | Description |
---|---|---|
1 | addons | array of plugins for adding functionality to core editor |
2 | autoFocus | to focus editor by default |
3 | config | configuring the plugin, toolbar etc in editor, here are default configurations |
4 | defaultValue | value to initialize editor content |
5 | licenseKey | license key for nib editor |
6 | onChange | callback which is called on any change in the editor |
7 | spellCheck | boolean property to enable default browser spellCheck in the editor |
8 | styleConfig | used to do more detailed style changes in the editor, here is the default |
9 | theme | theming of the editor, here is default theme |
GNU GENERAL PUBLIC LICENSE.
For details or queries drop mail to jyotipuri@gmail.com.