rich-markdown-editor - The open source React and Slate based markdown editor that powers Outline wiki

  •        108

A React and Slate based editor that powers the Outline wiki and can also be used for displaying content in a read-only fashion. The editor is WYSIWYG and includes many formatting tools whilst retaining the ability to write markdown shortcuts inline and output Markdown. See a working example in the example directory.

https://github.com/outline/rich-markdown-editor#readme
https://github.com/outline/rich-markdown-editor

Dependencies:

@tommoor/slate-drop-or-paste-images : ^0.8.1
babel-plugin-transform-async-to-generator : ^6.24.1
babel-plugin-transform-runtime : ^6.23.0
boundless-arrow-key-navigation : ^1.1.0
copy-to-clipboard : ^3.0.8
eslint-plugin-flowtype : ^2.46.1
eslint-plugin-prettier : ^2.6.0
immutable : ^3.8.2
outline-icons : ^1.0.0
react : ^16.2.0
react-dom : ^16.2.0
react-keydown : ^1.9.7
react-medium-image-zoom : ^3.0.10
react-portal : ^4.1.4
slate : ^0.34.5
slate-collapse-on-escape : ^0.6.1
slate-edit-code : ^0.15.5
slate-edit-list : ^0.11.3
slate-md-serializer : 4.1.1
slate-paste-linkify : ^0.5.1
slate-plain-serializer : 0.5.4
slate-prism : ^0.5.0
slate-react : ^0.12.3
slate-trailing-block : ^0.5.0
slugify : ^1.3.0
styled-components : ^3.2.3

Tags
Implementation
License
Platform

   




Related Projects

canner-slate-editor - ๐Ÿ“Rich Text / WYSIWYG Editor built for Modularity and Extensibility.

  •    Javascript

๐Ÿ“ Rich text / WYSIWYG editor focus on modularity and extensibility, build on top of Slate framework with beautiful designs and high-level APIs. Since this project is originally started from Canner, we notice that there is NO SINGLE editor is going to fit in all varieties of requirements, so we think the only way to solve this issue is to design a modular-first editor.

Hallo - Simple rich text editor (contentEditable) for jQuery UI

  •    CoffeeScript

Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable functionality to edit web content.The widget has been written as a simple and liberally licensed editor. It doesn't aim to replace popular editors like Aloha, but instead to provide a simpler and more reusable option.

Toast UI Editor - Markdown Wysiwyg Editor

  •    Javascript

Today CommonMark is the de-facto Markdown standard. And GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark maintained by GitHub which is known as the biggest Markdown user. ToastUI Editor respects CommonMark and GFM specifications. Write documents with easy and productive tools provided by ToastUI Editor. You can open this document wherever the specifications are supported.


react-rte - Pure React rich text "WYSISYG" editor based on draft-js.

  •    Javascript

This is a UI component built completely in React that is meant to be a full-featured textarea replacement similar to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. It's based on the excellent, open source Draft.js from Facebook which is performant and production-tested. RichTextEditor is the main editor component. It is comprised of the Draft.js <Editor>, some UI components (e.g. toolbar) and some helpful abstractions around getting and setting content with HTML/Markdown.

simplemde-markdown-editor - A simple, beautiful, and embeddable JavaScript Markdown editor

  •    Javascript

A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking. WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing. In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.

pen - enjoy live editing (+markdown)

  •    Javascript

You can clone the source code from github, or using bower.You can set defaults.textarea to a piece of HTML string, by default, it's <textarea name="content"></textarea>ใ€‚This will be set as innerHTML of your #editor.

Alloy Editor - WYSIWYG editor based on CKEditor with completely rewritten UI

  •    Javascript

Alloy Editor is a modern WYSIWYG editor built on top of CKEditor, designed to create modern and gorgeous web content. It provides smart toolbars appear right near the selected text and offer different functionality based on context, Paste rich text from any web page and preserve its formatting, The full styling power of CKEditor and lot more.

pell - The simplest and smallest WYSIWYG text editor for web, with no dependencies

  •    Javascript

pell is the he simplest and smallest WYSIWYG text editor for web, with no dependencies. It can be easily customizable with the sass file (pell.scss) or overwrite the CSS.

Trix - A rich text editor for everyday writing

  •    CoffeeScript

Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

ZSSRichTextEditor - A beautiful rich text WYSIWYG editor for iOS with a syntax highlighted source view

  •    Objective-C

ZSSRichTextEditor is a beautiful Rich Text WYSIWYG Editor for iOS. It includes all of the standard editor tools one would expect from a WYSIWYG editor as well as an amazing source view with syntax highlighting. The editor is used how any other text input area in iOS is used. A selection of text or content is made, then tapping on the toolbar item below will apply that style. A Source View is also included, you can make changes and this will be reflected in the editor preview.

HyperMD - A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

  •    TypeScript

Breaks the Wall between writing and preview, in a Markdown Editor. HyperMD is a set of CodeMirror add-ons / modes / themes / commands / keymap etc.

Draft-js - A React framework for building text editors

  •    Javascript

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.

Quill - Your powerful, rich text editor

  •    Javascript

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and open sourced by Salesforce.com. It provides granular access to the editor's content, changes and events through a simple API. It works consistently and deterministically with JSON as both input and output.