EpicEditor – An embeddable JavaScript Markdown editor | Hacker News Reader

EpicEditor – An embeddable JavaScript Markdown editor

epiceditor.com

121 pointstambourine_man31 comments

"Because, WYSIWYGs suck"

I think this is a bit short sighted. I like Markdown and I'll eventually integrate it into my product, but to discredit the usefulness of WYSIWYG would be foolish. Maybe there is a lack of good implementations for it to show any value. I'm currently evaluating redactor (http://imperavi.com/redactor/) as my WYSIWYG editor and I've been happy with it so far.

For example this is how I render the html that is generated by redactor:

http://screenshots.gitsense.com/wysiwyg-1.html

If you click the edit button on the bottom right hand corner, it'll bring up the WYSIWYG editor:

http://screenshots.gitsense.com/wysiwyg-2.html

And if I need to do a complex layout like the one in the screen shot, redactor lets you edit in raw html, as shown below:

http://screenshots.gitsense.com/wysiwyg-3.html

If you are working on a product and believe Markdown is the only way to go, you'll probably do yourself and your customers a disservice.

> and I've been happy with it so far.

famous last words.

i haven't seen an html-based editor i couldn't sabotage, just fooling around with it. and you know what they say about how the world keeps on inventing better fools, eh?

it's true.

now, if everyone who edits your content is experienced with .html, and knows how to avoid the pitfalls, great!

but if you want the general public to touch your stuff, you're gonna find yourself doing some heavy clean-up...

at least if my experience is any guide.

you'll have stuff that might _look_ "right", as long as it stays in the exact environment where it was last edited, but as soon as you move it, it will blow up in your face. because the markup underlying it was not done correctly.

_that's_ why wysiwyg sucks; it "looks" right, but it's not.

and it's not a "short-sighted" view. it's _experience_. painful, hard-fought, bang-head-against-wall experience.

now, perhaps redactor is ahead of everyone else on this, and it knows how to handle these headaches in advance, and if that's the case, i'd love to hear it. meanwhile...

-bowerbird

wysiwyg is fundamentally flawed because the web is not wysiwyg. And HTML is a semantic description of content, not its formatting. We fought long and hard for that to be recognised, only for people to come along and try to derail that effort with wysiwyg editors.

Case in point: the markup in your final link is terrible: tables for layout, inline styles, DIVs containing nothing by BRs, etc. I could never sanction the use of an editor that produces that kind of garbage.

Don't get me wrong, Markdown is not the solution either. For the novice, it shares the same sort of cognitive barrier as HTML - confusing symbols that take time and effort to understand, the whole notion of plaintext being rendered as formatted text - without the huge benefit of flexibility - many things just can't be done in Markdown.

I don't really know what the solution is, but - in my experience - reducing the problem set from a general purpose editor to do 50% of what HTML does, to context-specific 'wysiwyg-like' editors is a step in the right direction.

To be completely fair to Redactor, I don't think that it produced the 'Divs containing nothing but BRs'. I just made a few paragraphs in redactor in it marked them appropriately as <p>. I think that, given that that site was used as an example of allowing someone to let the html by hand, the errors you point out may very well likely be errors introduced by the person writing the html by hand.

"Case in point: the markup in your final link is terrible"

To be fair to Redactor, I was using an older version before its license change. It was something I quickly integrated a while back and it does introduce <BR> and some other weird things. At the moment moment of writing the tutorial, I just needed it to "Look Right" and not technically be "Right" or "Pretty". My core product doesn't revolve around document management.

"I could never sanction the use of an editor that produces that kind of garbage."

The thing is, I'm willing to bet a lot of people couldn't care less about the HTML produced. In my case, I just needed to get the document out ASAP so that I could move on to the other hundred things on my to do list. I probably used redactor to put a square into a circle, but it got the job done for me.

"Don't get me wrong, Markdown is not the solution either"

I agree and who ever comes up with the solution, will probably do quite well. My reason for posting was to point out the Markdown isn't the final solution. For now, I'm willing to bet a lot of people just want to be able to type away and have things look right, with out it being right.

"The thing is, I'm willing to bet a lot of people couldn't care less about the HTML produced."

People with disabilities, especially visual ones, rely on technologies that extract semantic meaning from your site's HTML in order to convert it to another form. If your HTML is garbage then your site is inaccessible.

http://en.wikipedia.org/wiki/Web_accessibility

The only sane solution I've yet seen is WYMeditor[1]. All the ease and immediacy of WYSIWYG, but producing proper standards-compliant code with the classes you choose. The code's not brilliant (having Rangy mixed in to cope with legacy IE annoys me), but the concept is so far ahead of anything else that I now use it pretty much exclusively for in-browser editing; as a professional writer I could never rewire my habits to the obtrusive markup of Markdown.

[1] https://github.com/wymeditor/wymeditor

i'd love to see it in action. and the examples don't work, at least not to my satisfaction. could you mount a demo? full-screen-height editor on the left half of the window.

-bowerbird

Too bad it looks kinda ugly. Example: http://wymeditor.github.io/wymeditor/dist/examples/01-basic....

I think these things are quite easy to fix. I definitely prefer redactors look, but being able to see each container is actually quite nice. You sort of have use your imagination when it comes to layout spacing, but I think this route is definitely better.

Thanks for the link! There were little quirks with redactor that was annoying and I think this tool would have eliminated those. The only thing that I don't like about the examples is when you want to edit in HTML, it puts the editor at the top. I prefer how redactor does it, which is one window at a time. However I'm guessing this is all customizable or you can implement one yourself if you wanted to.

Agreed. I have seen too many people try to get their images to align by left padding it with spaces in their WYSIWYG editors. I am thinking of only allowing markdown in my latest project. I have yet to put it in front of the computer phobic user (in this case, my girlfriend) to see how well it goes so not sure how well it will go down. however I am hoping that after some initial resistance it will result in far less 'why is my page messed up' requests.

Markdown isn't totally there though because there are certain situations where specific styling is needed. I am probably still going to need to implement some kind of extension to enable setting CSS classes on blocks of text to enable this.

Whilst I do enjoy the idea that is a Markdown editor, I think one of the main feature missing from this and most(?) is the ability to continue bullets and code indentations. Shameless plug I know, but that is why I built and use the following when editing Markdown in a textarea:

https://github.com/jamiebicknell/Markdown-Helper

I feel like a lot of Markdown editors get posted on HN. Some of them seem pretty cool, but it gets hard to keep track of them all after a while. Has anyone tried keeping a running list of these editors with their pros and cons?

I maintain an inventory¹ of Markdown dialects, editors, parsers, stylesheets, etc. — basically just some lists with links. They’re in YAML, though, so you may want to add extra info (like a short description with pros/cons), and file a pull request. I am considering to split the list of editors² into one for native apps, and another for web-based implementations (such as EpicEditor).

[¹] https://github.com/rhythmus/markdown-resources [²] https://github.com/rhythmus/markdown-resources/blob/master/m...

by the way, thanks for maintaining that fantastic resource!

-bowerbird

Thanks!

By the way: I’m very curious about your “zen markup language” in the make. Got some unfinished work in my drawers on “the best possible tool for writers”, too. Some more research, wireframes, and a few drafts on an _extensible_ markdown-like lightweight markup language. E.g. this little discussion: https://twitter.com/rhythmvs/status/423123272809455616

I sympathize with the idea of poet-turned-programmer. Maybe have a chat?

I looked at this a while back, it's big and bloated. Despite having no real UI it requires jQuery UI... I don't understand.

> Despite having no real UI it requires jQuery UI

Where?

    $ git clone https://github.com/OscarGodson/EpicEditor.git
    Cloning into 'EpicEditor'...
    remote: Reusing existing pack: 2951, done.
    remote: Total 2951 (delta 0), reused 0 (delta 0)
    Receiving objects: 100% (2951/2951), 1.53 MiB | 192.00 KiB/s, done.
    Resolving deltas: 100% (1392/1392), done.
    Checking connectivity... done.
    $ grep -ir jqueryui EpicEditor/|wc -l
    0
    $

Looks like the same one used in Telescope, the Meteor app: http://demo.telesc.pe/posts/a05eba73-cdd9-4d64-933d-2586ffc5...

It is :)

I don't understand in what sense it's an MD editor. It's an MD previewer all right. But no smart indentation (no Tab/Shift+Tab either). No syntax highlight. I can't find a single feature which helps me actually editing markdown.

P.S. Auto-saving in localStorage is a cool though.

The text seems old, it mentions posterous and didn't that shut down a while back?

Tab doesn't work.

Just what I needed! Thanks.

Very lame! This is much better, splitscreen, full screen, markdown, html code, or preview view. http://markdown.pioul.fr/

You created an account just to say that?

Shift+tab should unindent

you should let HTML and Preview tab to be editable, too. Currently, you can only edit Markdown panel.

HTML is editable for me, but not Preview

-edit HTML is editable, but it doesn't update the Markdown side nor does it update the Preview, so the edits that you do in HTML are apparently just thrown away

Very good. I'm using EpicEditor, but it is so much full of options that don't work as expected, like files, themes and saving to localStorage. I'll probably switch to some simpler alternative.

Reply on news.ycombinator.com