Hacker News new | ask | show | jobs
by samarudge 4814 days ago
This looks nearly identical to http://jhollingworth.github.io/bootstrap-wysihtml5/

So ima take the hit of being a stupid person and ask, what's the difference? Why should I use this over bootstrap-wysihtml5 (or why should I use bootstrap-wysihtml5 over this)?

2 comments

bootstrap-wysihtml5 was a great inspiration. it links in wysihtml5, and gives it a skin. here's a few reasons why we decided to build this one:

- wysihtml5 minimised is 112K + 20k for bootstrap-wysihtml5, without styles and images... this is only 5k, non-minimised.

- we bind hotkeys for common operations automatically (eg cmd+b for bold etc)

- drag&drop for images

- automatically upload images using filereader, not just provide links

- good support for touch devices

- no magic around toolbar, so you can use your own styling

- we don't force an inline iframe which mirrors a text area, which wysihtml5 does

Wysihtml5 has a better support for older browsers, the bootstrap skin has toolbar translations, so I'd still use that if you don't want a custom toolbar or need to support older browsers

I use wysihtml5 in a project. Mainly because all browser rich text editors are waaay to advanced. I don't want people to put images in my text fields, right align the text, put tables there, etc. wysihtml5 gives great control over what can be done. I want some rich editing, but I want full control over it. In my case a few text-types, bold, italic, bullet list and nothing more.

Does your editor allow this kind of control?

we don't create a toolbar. It's up to you. so if you don't put buttons for that, they won't be able to do it. hotkeys on the keyboard are also configurable, you can just bind certain items so users won't be able to execute the other commands unless they open a javascript console and call doc.executeCommand manually (but then again, that's difficult to prevent for other editors)
What if one copy-pastes in stuff that's not supposed to be there? With wysihtml5 it will clean up based on what's allowed. With yours, I believe I will need to do that manually?
yes, we don't hook anything. i've not tried this, but you should be able to hook on to the paste event for that div (the div is really your markup, we don't do any magic shadow iframing)
Thanks for your replies. :)
The lack of an iframe on yours is the killer feature for me (long story, but can't use an iframe for what I'd want this for). Great job all-around!
5KB is amazing. I thought that this would be a great replacement for bootstrap-wysihtml5 until i saw IE missing from your browsers list.

Btw, for the drag and drop inserting of images. You should probably check the url of the image and if it is from local file storage then upload it to the server and insert the resulting link back. That would be a cool feature to have in a editor.

It's not tested in IE, but we don't use any browserbspecific code (apart from chrome speech) so it might work just fine.

For server uploads, this would be pretty easy as a callback.

It looks good, but it's hard to use. They added this whole layer of… sanitization? that strips out all sorts of tags. I'm open to it having been PEBKAC but I recall struggling with it

There's definitely a need for a good bootstrap wysiwig form.

some cleanup might be good, eg when you select everything using cmd+a, then delete, some browser leave a <br/> in the content.

I didn't like forced sanitization in wysihtml5, so we added an optional method .cleanHtml - you can just use the normal jquery html method to get the non sanitized contents, or call cleanHtml() to get trailing empty divs, <br/> and whitespace removed