7 ms·

EpicEditor: An Embeddable JavaScript Markdown Editor

165 points by mars 14y ago

NHQ 14y ago
very nice!
DanielRibeiro 14y ago
Hint: the maximize button splits the screen, and giving you editor/look view (like coffeescript site does for coffee/js).
pstuart 14y ago
Nice. MultiMarkdown would be even cooler!
- techwraith 14y ago
  The parser is completely interchangeable, it would be a one line change to make this work (with just about any language you have a parser for).
cwilson 14y ago
I'd love to implement this instead of a WYSIWYG into our platform, but the problem is our users (non-technical) are not going to take the time to learn markdown. Even if we had a guide on the right I have a hunch they would still be super confused. Idea: Add buttons to the top (optional) that LOOK like a WYSIWYG (something they are familiar with), that simply apply markdown around text. I think you'd see such much wider adoption with that addition, which is something I'd love to happen, because WYSIWYG's do indeed suck.
- techwraith 14y ago
  This is something that is planned last I talked with Oscar. I'm sure he'd appreciate the feedback.
- subpixel 14y ago
  Your suggestion might be a good default for handling image insertion. I know markdown, but in instances where I'm specifying an image (e.g. a blog, a CMS page) I'd rather have a button that lets me select from available images than have to type it out using markedown (which would require that I know the filename and explicit path). Not to mention image alignment.
  - mise 14y ago
    I would have the same challenge - TinyMCE gives me a way to link to other pages (the list of other pages is generated by a script). I wonder how you could add such help on top of a Markdown editor.
- lazerwalker 14y ago
  Agreed 100%. GitHub's wiki UI (example: http://cl.ly/2T2718220P1Y3h0M330r http://cl.ly/2T2718220P1Y3h0M330r) would be a great place to take inspiration from, since that's almost exactly what you're talking about.
  - deleted 14y ago
    [deleted]
  - gojomo 14y ago
    Github's button-bar is nice, but let me throw up another offbeat idea: a hybrid toolbar/cheatsheet. It'd have: • a toolbar-like row of pulldowns: one for 'range/inline' markup (like bolding), one for 'block/paragraph' markup (like headers, blockquote, code-indent), and one for complicated inserts (like link+linktext, image+alt) • each pulldown would be filled with side-by-side entries showing both markup and effect, like the best cheatsheet/reference pages are laid out • selecting a bit of markup would do 'the right thing' with the existing insertion point or selection-range Thus a user might momentarily click then dismiss the dropdown just to refresh their memory of the syntax, or actually pick from the dropdown for assisted inserts. (If they're regularly picking items, it could reorder by 'frecency' for convenience. If they're usually just looking, it might instead order by some form of 'infrecency' [1] – don't bother showing familiar constructs that have been recently typed.) [1] At the moment while there are thousands of Google hits for ["frecency"] there are none for ["infrecency"]. It's an infrecently needed concept.
- johnmdonahue 14y ago
  Yep, this is planned once we get cross platform support (still need IE8 and mobile) https://github.com/OscarGodson/EpicEditor/issues/41 https://github.com/OscarGodson/EpicEditor/issues/41
- voyou 14y ago
  Why would you want to force users to use a markup language that, as you say, they have no desire to learn, rather than a simple WYSIWYG editor? How would that make things better for users?
president 14y ago
This is brilliant.
guptaneil 14y ago
This looks cool, but unfortunately does not work well on touch devices. It looks like the preview and maximize buttons depend on the hover event.
- johnmdonahue 14y ago
  This is the next thing we'll be tackling after IE8 support actually. It'll have a totally custom look for mobile. https://github.com/OscarGodson/EpicEditor/issues/27 https://github.com/OscarGodson/EpicEditor/issues/27
dfischer 14y ago
I think it would be better if it offered some way to see a cheat sheet. I don't see that in the initial examples and too lazy to investigate.
- techwraith 14y ago
  That's not really in the scope of the project, but it could certainly be added on.
- johnmdonahue 14y ago
  Was reported today and we responded here: https://github.com/OscarGodson/EpicEditor/issues/148 https://github.com/OscarGodson/EpicEditor/issues/148
tubbo 14y ago
That's...fucking awesome.
Produce 14y ago
Is the 'epic' supposed to be ironic?
- oscargodson 14y ago
  Honestly, it was a random name I made for the directory it was in while I was experimenting. I put my very-super alpha on github and it got picked up by thechangelog and started trending for the month and so I decided, meh, I'll just keep it. But, personally I hate the name too :)
drewmclellan 14y ago
This is similar in many ways to MarkItUp (http://markitup.jaysalvat.com/ http://markitup.jaysalvat.com/), which I've had good experiences with. One potential pitfall with JavaScript preview of Markdown (or Textile, or any other similar language) is that if you're not using the same script to transform the content at the server side, the final output can contain subtle differences. Not all implementations are precisely equal. If differences do occur, that can be frustrating for the user who just carefully previewed their work. An alternative (albeit a more resource intensive one) would be to make ajax requests back to the server and have it perform the transformation and return it to the page. Unfortunately, that's probably not going to be satisfactory for realtime previewing.
- codeka 14y ago
  I used to use MarkItUp but eventually moved away from markdown altogether. I found I had to keep tweaking the parser to allow stuff like inline, floated images, code blocks with language-tagging (for syntax highlighting) and so on. It came to be more work than just using a WYSIWYG editor.
  - oscargodson 14y ago
    Code blocks with syntax highlighting is super easy to implement. Styling images should be done with CSS, no? Also, you can add HTML in Markdown so you could easily just do: < img src= "..." class="align-right" >
easternmonk 14y ago
I have been looking for something like this for a long time. Most certainly I will try this out.
skylamer 14y ago
similar: http://hallojs.org http://hallojs.org
antihero 14y ago
What'd I'd love to see is something that is a WYSIWYG interface for editing Markdown. Markdown is fantastic and awesome because it limits what people can do, but expecting clients to learn it is a pain in the arse.
- wmblaettler 14y ago
  http://hallojs.org http://hallojs.org does this, it was on HN yesterday.
  - RyanMcGreal 14y ago
    Looks great, but by default it subjects the user to the markdown gotcha of wanting to italicize text_with_underscores_in_it. EpicEditor, by contrast, has italicizing underscores_inside_words turned off.

165 points by mars 14y ago

NHQ 14y ago

very nice!

Hint: the maximize button splits the screen, and giving you editor/look view (like coffeescript site does for coffee/js).

pstuart 14y ago

Nice. MultiMarkdown would be even cooler!

techwraith 14y ago
The parser is completely interchangeable, it would be a one line change to make this work (with just about any language you have a parser for).

cwilson 14y ago

I'd love to implement this instead of a WYSIWYG into our platform, but the problem is our users (non-technical) are not going to take the time to learn markdown. Even if we had a guide on the right I have a hunch they would still be super confused. Idea: Add buttons to the top (optional) that LOOK like a WYSIWYG (something they are familiar with), that simply apply markdown around text. I think you'd see such much wider adoption with that addition, which is something I'd love to happen, because WYSIWYG's do indeed suck.

techwraith 14y ago
This is something that is planned last I talked with Oscar. I'm sure he'd appreciate the feedback.
subpixel 14y ago
Your suggestion might be a good default for handling image insertion. I know markdown, but in instances where I'm specifying an image (e.g. a blog, a CMS page) I'd rather have a button that lets me select from available images than have to type it out using markedown (which would require that I know the filename and explicit path). Not to mention image alignment.
- mise 14y ago
  I would have the same challenge - TinyMCE gives me a way to link to other pages (the list of other pages is generated by a script). I wonder how you could add such help on top of a Markdown editor.
lazerwalker 14y ago
Agreed 100%. GitHub's wiki UI (example: http://cl.ly/2T2718220P1Y3h0M330r http://cl.ly/2T2718220P1Y3h0M330r) would be a great place to take inspiration from, since that's almost exactly what you're talking about.
- deleted 14y ago
  [deleted]
- gojomo 14y ago
  Github's button-bar is nice, but let me throw up another offbeat idea: a hybrid toolbar/cheatsheet. It'd have: • a toolbar-like row of pulldowns: one for 'range/inline' markup (like bolding), one for 'block/paragraph' markup (like headers, blockquote, code-indent), and one for complicated inserts (like link+linktext, image+alt) • each pulldown would be filled with side-by-side entries showing both markup and effect, like the best cheatsheet/reference pages are laid out • selecting a bit of markup would do 'the right thing' with the existing insertion point or selection-range Thus a user might momentarily click then dismiss the dropdown just to refresh their memory of the syntax, or actually pick from the dropdown for assisted inserts. (If they're regularly picking items, it could reorder by 'frecency' for convenience. If they're usually just looking, it might instead order by some form of 'infrecency' [1] – don't bother showing familiar constructs that have been recently typed.) [1] At the moment while there are thousands of Google hits for ["frecency"] there are none for ["infrecency"]. It's an infrecently needed concept.
johnmdonahue 14y ago
Yep, this is planned once we get cross platform support (still need IE8 and mobile) https://github.com/OscarGodson/EpicEditor/issues/41 https://github.com/OscarGodson/EpicEditor/issues/41
voyou 14y ago
Why would you want to force users to use a markup language that, as you say, they have no desire to learn, rather than a simple WYSIWYG editor? How would that make things better for users?

president 14y ago

This is brilliant.

guptaneil 14y ago

This looks cool, but unfortunately does not work well on touch devices. It looks like the preview and maximize buttons depend on the hover event.

johnmdonahue 14y ago
This is the next thing we'll be tackling after IE8 support actually. It'll have a totally custom look for mobile. https://github.com/OscarGodson/EpicEditor/issues/27 https://github.com/OscarGodson/EpicEditor/issues/27

dfischer 14y ago

I think it would be better if it offered some way to see a cheat sheet. I don't see that in the initial examples and too lazy to investigate.

techwraith 14y ago
That's not really in the scope of the project, but it could certainly be added on.
johnmdonahue 14y ago
Was reported today and we responded here: https://github.com/OscarGodson/EpicEditor/issues/148 https://github.com/OscarGodson/EpicEditor/issues/148

tubbo 14y ago

That's...fucking awesome.

Produce 14y ago

Is the 'epic' supposed to be ironic?

oscargodson 14y ago
Honestly, it was a random name I made for the directory it was in while I was experimenting. I put my very-super alpha on github and it got picked up by thechangelog and started trending for the month and so I decided, meh, I'll just keep it. But, personally I hate the name too :)

drewmclellan 14y ago

This is similar in many ways to MarkItUp (http://markitup.jaysalvat.com/ http://markitup.jaysalvat.com/), which I've had good experiences with. One potential pitfall with JavaScript preview of Markdown (or Textile, or any other similar language) is that if you're not using the same script to transform the content at the server side, the final output can contain subtle differences. Not all implementations are precisely equal. If differences do occur, that can be frustrating for the user who just carefully previewed their work. An alternative (albeit a more resource intensive one) would be to make ajax requests back to the server and have it perform the transformation and return it to the page. Unfortunately, that's probably not going to be satisfactory for realtime previewing.

codeka 14y ago
I used to use MarkItUp but eventually moved away from markdown altogether. I found I had to keep tweaking the parser to allow stuff like inline, floated images, code blocks with language-tagging (for syntax highlighting) and so on. It came to be more work than just using a WYSIWYG editor.
- oscargodson 14y ago
  Code blocks with syntax highlighting is super easy to implement. Styling images should be done with CSS, no? Also, you can add HTML in Markdown so you could easily just do: < img src= "..." class="align-right" >

easternmonk 14y ago

I have been looking for something like this for a long time. Most certainly I will try this out.

skylamer 14y ago

similar: http://hallojs.org http://hallojs.org

antihero 14y ago

What'd I'd love to see is something that is a WYSIWYG interface for editing Markdown. Markdown is fantastic and awesome because it limits what people can do, but expecting clients to learn it is a pain in the arse.

wmblaettler 14y ago
http://hallojs.org http://hallojs.org does this, it was on HN yesterday.
- RyanMcGreal 14y ago
  Looks great, but by default it subjects the user to the markdown gotcha of wanting to italicize text_with_underscores_in_it. EpicEditor, by contrast, has italicizing underscores_inside_words turned off.