motherjones/tweditor

Name: tweditor

Owner: Mother Jones

Description: Using Marked and CodeMirror to build a Wymisyg

Created: 2014-03-12 20:01:28.0

Updated: 2014-10-01 20:41:11.0

Pushed: 2014-10-30 02:06:55.0

Homepage:

Size: 785

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

TWEditor

In short TWEditor is a “What You Mean is What You Get” MarkDown editor with live preview and helpful menu.

Why

Because Wysiwygs are not cool and often get in the way of writers writing. Intended to be used with marked but work with modifications to the parser and lexer.

Live Demo

See here for a live demo.

Basic usage

See index.html in the root of the repository.

External Libary Requirements:

• Base CodeMirror CSS and js
• CodeMirror Markdown and XML js
• Jquery 2.X
• All of the files in /libs

Code Examples

k rel="stylesheet" href="lib/tweditor.css">
ipt type="text/javascript" src="lib/tweditor.js"></script>

avascript
itor('textarea#markdown');

tml
l>
tarea id="markdown">
der

graph **with bold** text.
xtarea>

TODO

• Improve UX/UI
• Move menu to above cursor on selection
• Hide menu like task bar when not hovered
• Make buttons lineup and improve controls look.
• Make split screen look like a full window dialog
• Make edit and view area same size and positioning as original element its bound to.
• Make it work with both textarea and div with contents.
• Add Missing block elements
• Blockquotes
• Bulleted lists
• Numbered lists
• Add Missing inline elements
• Bold italic(both selected)
• Link Dialog
• Image Dialog
• Highlight Buttons based off of current line/char selection.
• Improve lexer support so that buttons work cleanly.
• Add custom parser to tweditor(content, option)