Hi-res

WIP: Tickle Project Managment Tool

Hi-res

MarkItUp Markdown Set

I found out about markItUp! Universal Markup Editor (jQuery Plugin) yesterday. It turned out to be a good alternative to WMD Markdown Editor, with more readable code and easy customization via callbacks

However, since its designed more as a universal markdown editor, some features are a little lacking (or not designed for a certain feature, but that can be fixed with custom callbacks) and I find it got some usability issues (eg. not everyone will know Ctrl+Shift Click will make changes to each line of selection). That said, it maybe just because I haven’t learnt all about it yet, its very customizable with callbacks, making it very powerful.

This is the modified the markdown set demo & download, based on Basic Markdown Set

Buttons/Keyboard Shortcuts

• Ctrl+B: Bold
• Ctrl+I: Italic
• Ctrl+U: Underline (non-standard markdown. Wraps selection with __, rendered as <span class="underline">...</span>)
• Ctrl+H: Highlight (non-standard markdown. Wraps selection with !, rendered as <mark>...</mark>)
• Ctrl+D: Delete/Strikethrough (non-standard markdown. Wraps selection with --. Rendered as <del>...</del>)
• Ctrl+1: H1
• Ctrl+2: H2
• Unordered List: Ctrl+Shift Click to add - to everyline of selection
• Ordered List: Same as Unordered List, except adds number bullets (eg. 1.)
• Ctrl+G: Image
• Ctrl+L: Link
• Ctrl+Q: Quote, Ctrl+Shift+Click to add > to each line of selection
• Ctrl+K: Code, Wraps selection with `, haven’t found a way to create code blocks, workaround is to use Tab instead
• Ctrl+P: Preview

Known Issues (Some just very minor)

• Usability: I would prefer users not require the use of custom modifier keys eg. Shift or Alt when marking up content. Many users will probably not learn of it at all unless they use/learn markItUp before.
• Code Blocks: Probably code blocks need to be created via callbacks, I preferring to use native options provided by markItUp first, before resorting to custom callbacks.
• Links/Images: Use footnotes instead. Inline link declarations, I find makes the content hard to read
• Lack of validation/awareness of context:
  • I can add links with empty/invalid URLs
  • Should automatically detect if selection contains newlines, instead of relying on modifiers like Shift
• I prefer the selection stays when using Tab. Solved: using Tab Override (jQuery Plugin) for tabs/indents
• Preview: I used custom callbacks for preview instead of relying on server-side scripts. It always appends the preview div to the parent .markItUpContainer without regard for the options like previewInNewWindow, previewPosition etc
• Only can Alt+Click, can’t use key combinations like Alt+K, AFAIK

Considerations

• Links/Images: should I allow users to set title, alt text, even key used in markdown? It can confuse the user tho. But things like title & alt text are important for SEO/CMS

WIP: MarkdownEditor (jQuery)

Demo: http://goo.gl/coqbh