nib-edit / Nib
Licence: gpl-3.0
Wysiwyg / Text editor components built using React and Prosemirror
Stars: ✭ 181
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Nib
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+6338.12%)
Mutual labels: editor, text-editor, wysiwyg-editor
Mg
Micro (GNU) Emacs-like text editor ❤️ public-domain
Stars: ✭ 117 (-35.36%)
Mutual labels: editor, text-editor
Bim
small terminal text editor with syntax highlighting
Stars: ✭ 174 (-3.87%)
Mutual labels: editor, text-editor
React Page
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.
Stars: ✭ 8,704 (+4708.84%)
Mutual labels: editor, wysiwyg-editor
Tiptap
The headless editor framework for web artisans.
Stars: ✭ 13,629 (+7429.83%)
Mutual labels: editor, wysiwyg-editor
Notepadqq
A simple, general-purpose editor for Linux
Stars: ✭ 1,738 (+860.22%)
Mutual labels: editor, text-editor
My Vue Editor
a rich text editor for Vue 2.x
Stars: ✭ 129 (-28.73%)
Mutual labels: editor, wysiwyg-editor
Guppy
WYSIWYG mathematics editor with structured, searchable, LaTeX-compatible, and parseable output
Stars: ✭ 147 (-18.78%)
Mutual labels: editor, wysiwyg-editor
O
🌀 Text editor suitable for writing git commit messages and editing Markdown files. Can build executables and jump to errors at the press of `ctrl-space`, for several programming languages. Can format code with `ctrl-w`. Provides general syntax highlighting, rainbow parenthesis and cut/paste portals. o is intentionally limited to VT100.
Stars: ✭ 54 (-70.17%)
Mutual labels: editor, text-editor
Canner Slate Editor
📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Stars: ✭ 1,071 (+491.71%)
Mutual labels: editor, wysiwyg-editor
Dte
A small, configurable console text editor (moved to https://gitlab.com/craigbarnes/dte)
Stars: ✭ 98 (-45.86%)
Mutual labels: editor, text-editor
Megadraft
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility
Stars: ✭ 982 (+442.54%)
Mutual labels: editor, wysiwyg-editor
Awesome Wysiwyg
A curated list of awesome WYSIWYG editors.
Stars: ✭ 1,801 (+895.03%)
Mutual labels: editor, wysiwyg-editor
Jodit
Jodit - Best WYSIWYG Editor for You
Stars: ✭ 947 (+423.2%)
Mutual labels: editor, wysiwyg-editor
Femto
A toy text editor with no dependencies written in Ruby
Stars: ✭ 34 (-81.22%)
Mutual labels: editor, text-editor
Simple Java Text Editor
📝 PHNotepad is a simple Java text/code editor (notepad) written in Java. It has also nice features such as Search tool, Find/Replace text/code, Auto completion, Nice Image Buttons for better UX, etc.
Stars: ✭ 128 (-29.28%)
Mutual labels: editor, text-editor
Rich Markdown Editor
The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
Stars: ✭ 2,468 (+1263.54%)
Mutual labels: editor, wysiwyg-editor
NIB
Demo
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
Setup of the editor is quite straight forward. It is required to be installed from npm.
Installing packages:
Either npm or 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
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 |
Features
- 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
License
GNU GENERAL PUBLIC LICENSE.
Contact
For details or queries drop mail to [email protected].
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].