Bootstrap-wysihtml5: a simple, beautiful wysiwyg editor | Hacker News Reader

Bootstrap-wysihtml5: a simple, beautiful wysiwyg editor

jhollingworth.github.com

259 pointsjfhollingworth64 comments

Looks promising! Might be an interesting additional editor candidate in Create (http://createjs.org/). Though, Create is MIT and the wysihtml5 library used by this is GPL, so the licenses are not compatible.

Currently we use Hallo (http://bergie.github.com/hallo/) by default, and Aloha Editor (http://aloha-editor.org/) with bundled integration.

Opened a ticket at wysihtml5 to reconsider their licensing: https://github.com/xing/wysihtml5/issues/22

It's now been updated to MIT (https://github.com/xing/wysihtml5/commit/444bda34c16354ed05c...) as has bootstrap-wysihtml5's

Create (http://createjs.org/) is no where near the quality of Mercury Editor, (http://jejacks0n.github.com/mercury/) me thinks.

Create is the CMS UI shell around a WYSIWYG editor (well, potentially around other widgets you need like datepickers and choosers as well). We could use Mercury quite easily as another editor option.

Create's editor options are provided as jQuery UI wrapper widgets, for example: https://github.com/bergie/create/blob/master/src/editingWidg...

BTW, check out http://blog.liip.ch/archive/2012/03/20/cmf-editor-overview-s... and http://iks.alkacon.com/en/ if you want to see a bit more comprehensive Create UI setups.

Aloha is AGPL though, it seems they do license exceptions for BSD projects, is that what you have?

Yep, we have an exception from them. But still, we only ship an integration plugin and Aloha Editor has to be installed separately. This way the whole Create repo is MIT-only.

Actually, the X11 License (sometimes called the "MIT License", but MIT has used many licenses) is GPL-compatible: http://www.gnu.org/licenses/license-list.html#X11License

Looks very nice, but I was hoping it would work more like Google Docs:

* The styles dropdown should update to reflect the style currently under the cursor.

* Hitting tab on a list should further indent the list item.

Those were just a couple of things I immediately noticed.

This is why I love open source. 30 minutes ago I was thinking "I wonder if there's a WYSIWYG editor that integrates with Bootstrap."

And now, here I am, reading about it.

It looks like the beginning of a very nice project!

I had a similar itch to scratch a few weeks ago when I wanted a nice simple editor for a project and modified the pagedown editor (the markdown editor from stackoverflow) to use bootstrap. Its here: https://github.com/samwillis/pagedown-bootstrap

You can see a demo here: http://dl.dropbox.com/u/2690345/pagedown-bootstrap-demo/demo...

awesome! I'd personally much prefer to use markdown for my projects but unfortunately I'm not targeting developers :/

I'm in the same situation. Got a hobby writing app slapped together that has a built in Markdown converter. I want normal people to use it but the idea is to focus on the writing, not the formatting so there's no buttons for WYSIWYG editing. I think I'm the right context Markdown only would work. In my situation I'm probably just going to throw up a short intro to Markdown tutorial for people who want to format their writing. It's okay in my case because the focus should be on words, not formatting and I have a hunch regular folks can learn Markdown within 20 minutes at most for the most part.

Shameless plugs: http://writeapp.me (source on github at http://github.com/billpatrianakos/Write.app)

shameless plug too, feel free to try my DOM > markdown project. should be easy to get any editor that generates DOM to emit markdown

https://github.com/leeoniya/reMarked.js

demo: http://leeoniya.github.com/reMarked.js/

This is awesome. I was using tinymce but will switch to yours. Is there an easy way for allowing image upload as opposed to external link?

You would need to fork it and edit Markdown.Editor.js to change the dialogue to include the upload logic. Somewhere around line 1023 (https://github.com/samwillis/pagedown-bootstrap/blob/master/...)

You really mustn't give me much credit for it, the guys here did the hard part: http://code.google.com/p/pagedown/

Thanks!!

I'm using the ace editor (highly recc'ed) and have been looking at HTML->(markdown|plaintext) issues. Thanks for this.

Nice presentation and looks to have real promise, but the source output looks just as bad as WordPress (unless it is just the Developer Tools). I see spans with inline CSS, empty divs and br's all over the place. It doesn't look very clean but if I am wrong please correct me.

Also, for practical use it needs indent controls for lists and there is a need to deal with links.

I hear that but I feel like there are some things in life we'll never be rid of and messy markup from WYSIWYG editors is just one of those things. I've never known any GUI tool to produce clean code whether it be GUI settings managers on Linux or WYSIWYG editors on the desktop or web.

What gets sent when the form is submitted?

This just decorates a <textarea>, you still need to create the form yourself.

Totally broken for me. Firefox has weird selection behavior (trying to italicize one word often catches the previous one, next one, whole sentence - or works normal), with Chrome the buttons don't work at all and with Camino (older Gecko engine), I can't even place the cursor.

can you try http://tifftiff.de/wysihtml5/examples/advanced.html and seeing if you see the same issues?

Firefox 11 has the italics issue in both the normal and advanced editor.

I have the same issue with the original linked example using Chrome on OSX but do not have the trouble on the advanced.html page.

Works better, but it has its share of weirdness. Just by clicking around on a "lorem ipsum" text it seems to work okay in Firefox (beta) and Camino (i.e. two Gecko versions), not at all in Chrome dev (clicking on italic/bold/h1 won't change anything) and if I select a line in Safari to make it a headline, it also applies the transformation to the following paragraph. If I then click "h1" again, everything is back to normal. A third click then works as intended, i.e. only the selected line is turned into a headline. From then on, this line works normal, but the whole game repeats itself if I do it with another line.

FWIW I am too on Firefox and I am not seeing any weird behavior. (Beautifully done, by the way. Great job.)

I had same issues as mhd on FF 10.0.2 on Kubuntu.

Advanced example works without bugs for me; my test has following HTML output ("So this is <b>the</b> thing <i>then</i>?<br><br><h1><span class="wysiwyg-color-red">Does it always work?</span></h1><h2>If it does then, great!</h2>Or, y'know, not bad.<br><br><ul><li>Yes</li><li>No</li><li>Maybe</li><li>So!</li></ul><h1>Yay it worked!!</h1>").

I don't want to be the spoil sport, but even though this looks nice, am I the only one here that still believes in hand-coding HTML?

(Disclaimer: I'm a zealot. I don't believe in IDEs, and I'll take grep over Eclipse any day of the week. http://xkcd.com/378/)

Most of HN shares the same opinion, but what does this have to do with bootstrap-wysihtml5?

I think it's more a matter of context. In fact, I do believe in hand coding HTML. but this is a link for a simple wysiwyg editor. I would assume that this attracts mainly people that have _some_ need for a wysiwyg editor for _something_. So your demographic might be skewed inside this particular comment section?

Sigh. Deal-breaker. Hitting 'Enter' creates <br>s and not <p>s and it looks like they don't plan to change it: https://github.com/xing/wysihtml5/issues/13

I agree with the original ticket poster but if someone creates a patch adding an option as suggested, this should be good enough?

How about shift-enter for <p>?

Traditionally it works the other way around - shift-enter for br and enter for p.

Good point, and one I didn't realize.

I currently use fckeditor for all client projects and I really want an alternative, so this looks perfect. I know it's probably not on top of your features list but inserting images would be a great add-on, most of my clients need it.

Inserting images and links is next on the list. https://github.com/xing/wysihtml5 supports them all - I just need to add it to the UI

It certainly is simple and beautiful but it also needs to be functional. I selected H2 and typed some characters, then backspaced to the beginning where it reverted to normal text but did not update the UI (still showed as H2).

A simple, beautiful collaborative editor: https://github.com/johnyma22/etherpad-lite-jquery-plugin

The new Basecamp uses wysihtml5 and we're quite happy with it!

I actually found out about wysihtml5 after poking around in the new basecamp source code. I really loved your design thus why I made this.

Now THIS is what I was looking for. Simple. Clean. Integrates with bootstrap. In my case I need even less functionality. Just bold and lists. Will try this one!

Very nice, although I'd say the icon for numbered lists could be better; right now it simply looks like a chunkier version of the bulleted list button.

This is pretty awesome, the only issue I have is it seems to escape my HTML automatically preventing me from using it as the editor for my blog :/

ok I am excited for this. Looks great and is super clean. If you could add support for predefined styles in the drop-down along with links and simple image insertion it could handle 90% of my wysiwyg needs for projects.

Of all the wysiwyg editors out there it seems that most are just too bloated and the lightweight ones are just too "ugly".

Adding links and images is next on the list. wysihtml5 supports it, I just need to update the UI

This looks amazing! I've been using TinyMCE on a few projects, but I'm definitely taking this for a spin. Great job!

Given what I can do in notepad, this doesn't quite do it for me. Yes, notepad is not what-you-see-is-what-you-get, but it doesn't take that much to create a HTML repel and that followed by alt-tab allows me pretty much every thing I want. I am uncomfortable with 'some one else's idea of a good time' when it comes to feature selection---no <hr/>? Etc. Good idea in general, just not for me, not yet.

For a lot of users, WYSIWYG is good, especially if it really integrates with the web page you're trying to edit (not a non-styled IFRAME like in the traditional CMS editors).

I also usually write in Markdown, but the latest breed of editors is starting to be good enough that I may be able to swap. And as for <hr />, that is usually configurable in the editor setup.

Disclaimer: I'm an author of one the new editors, Hallo.

Off topic but I'm currently looking for a font size plugin for hallo, do you happen to know if one exists? (or anything using a select box).

I don't think anybody has written that plugin yet. Could you post a ticket? I'm spending some days on Hallo and Create next week, and so could possibly write one.

Seems like the start of a great project! Would love to see somebody add in support for mobile browsers too :)

None of these wysiwig editors work properly on an ipad. I bet it is the same for smart phones.

Tell Apple about it: http://openradar.appspot.com/7619599

Odd, there were reports of iOS 5 fixing issues with contentEditable: http://www.symphonious.net/2011/06/10/contenteditable-in-mob...

Neat, but doesn't work at all. Just the lists.

there's a non trivial lag when typing for me on chrome, makes it pretty hard to use

I remember the new Basecamp having the same problem just after they launched (it's gone/fixed now), maybe someone from their team could chime in on how they solved it?

Hmmm. Not sure what you're referring to. We've made some improvements (http://37signals.com/svn/posts/3137-using-event-capturing-to...), but nothing specifically related to the editor/Chrome.

Hmm ok, well the first two days after you launched the editor had some lag for me on Chrome on my MBA, especially the time from clicking the editor until it expanded and let me type would last 1 to 3 seconds and typing itself had some lag too. Anyone else had this problem?

Just what I needed! Thanks!

Are you happy to share your contact details? (If yes, say which) Are you happy to share your contact details? (If yes, say which)

You may not be able to supply all this information at this stage but please do register as much as you can with them to be in with an opportunity to be part of this. You may not be able to supply all this information at this stage but please do register as much as you can with them to be in with an opportunity to be part of this.

Reply on news.ycombinator.com