

Bootstrap-wysihtml5: a simple, beautiful wysiwyg editor - jfhollingworth
http://jhollingworth.github.com/bootstrap-wysihtml5/

======
bergie
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.

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

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

------
reedlaw
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.

------
JonWood
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.

------
samwillis
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...](http://dl.dropbox.com/u/2690345/pagedown-bootstrap-
demo/demo/browser/demo.html)

~~~
therandomguy
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?

~~~
samwillis
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/...](https://github.com/samwillis/pagedown-
bootstrap/blob/master/Markdown.Editor.js#L1023))

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

~~~
therandomguy
Thanks!!

------
da_n
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.

~~~
billpatrianakos
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.

------
science_robot
What gets sent when the form is submitted?

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

------
mhd
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.

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

~~~
mhd
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.

------
arbrandes
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/>)

~~~
hellerbarde
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?

------
andybak
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>

~~~
dhimes
How about shift-enter for <p>?

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

~~~
dhimes
Good point, and one I didn't realize.

------
stef25
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.

~~~
jfhollingworth
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

------
bithive123
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).

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

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

~~~
jfhollingworth
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.

------
dersebbi
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!

------
_frog
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.

------
edude03
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 :/

------
moondev
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".

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

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

------
hsmyers
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.

~~~
bergie
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.

~~~
antinitro
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).

~~~
bergie
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.

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

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

~~~
gokhan
Tell Apple about it: <http://openradar.appspot.com/7619599>

~~~
shadowfiend
Odd, there were reports of iOS 5 fixing issues with contentEditable:
[http://www.symphonious.net/2011/06/10/contenteditable-in-
mob...](http://www.symphonious.net/2011/06/10/contenteditable-in-mobile-
webkit-update/)

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

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

~~~
jurre
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?

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

~~~
jurre
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?

------
spiffistan
Just what I needed! Thanks!

------
andyking
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.

