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
yarn commands can be used.
npm i nib-core --save
Writing editor component:
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.
|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|
- Support for almost all browsers and devices
- Multiple rich text styling options like bold, italic, underline, strike, subscript, superscript, text color, filll color, etc
- Support for different block types paragraph, h1 - h6, blockquote etc
- Support for hyperlinks
- Support for nested ordered and unordered lists
- Support for images with options like wrapping, aligning, re-sizing or linking images
- Support for inline mode with floating toolbar
- Support for customized display - full page, word like display, etc
- Allow undo and redo changes.
- Help menu that display supported formatting options and their keyboard shortcuts
- Changing look and feel of editor using different themes
- Convert prosemirror JSON to and from markdown
- Convert prosemirror JSON to and from HTML
- Source code editing
- Table with advance options like add/remove column/row, resize columns, etc
- Support for displaying video from sources like Youtube or Vimeo
- Flexibility to add custom plugin
- Track changes make of document along with any metadata saved about the change like username, timestamp, etc
- Adding / editing comments to document
- Collaborative editing with multiple users on same document
GNU GENERAL PUBLIC LICENSE.
For details or queries drop mail to [email protected].