Wysiwyg editor components built using ReactJS and Prosemirror
Despite various options available for rich text editing in html, it continues to be extremely challenging area.
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 ron-react applications.
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 />;
Props supported by the editor.
|1||blockStyles||Style of variuos blocks used in the editor, here are the defaults which can be overridden.|
|2||defaultValue||Value to initialize editor content|
|3||onChange||Callback which is called when the content of the editor changes|
|4||config||Configuring the plugin toolbar etc in editor, here are default configurations which can be overridden.|
|5||spellcheck||Boolean property to enable default browser spellcheck in the editor.|
|6||theme||Theming of the editor, here is default theme which can be overridden.|
Editor is in initial phase of development and right now api is not stable.
If you have any queries or require any help you can email me.