

Show HN: Wysihtml – Open-source rich text editor for web apps - olla
https://github.com/Voog/wysihtml/

======
olla
We are trying to revive and modernise a once popular open source editor
xing/wysihtml5. It is configurable to be used with and without an iframe. The
editable area API is separated from the toolbar so it would be easy to
customise or completely rebuild the toolbar logic for your own app.

The Voog team

~~~
titusjohnson
I glanced through the parser rules, and it looks like you guys have
implemented some kind of named filters in addition to the per-tag-per-
attribute rule set from wysihtml5.

Having just spent too much time fighting wysihtml5's overly opinionated rules
trying to allow <a> tags to allow any value for href, changes in this area are
of great interest to me.

Could you touch on what changed in the parser rules?

~~~
olla
I will try to update the wiki of our github repo soon with the additional
options.

------
otherusername
Something I'd really like is a way to expose CSS styles to the editor easily.
One of the major problems I always run into is that my customers try to make
things look like the rest of the website by hacking the text a bit.

They'll see a highlighted word or sentence with a bold font, wider spacing and
a blue background. So they set the background blue, the font bold and the
spacing wider. But really, the editor should provide an intuitive way to apply
the <span class="highlight"> element.

Some editors out there do this, but they generally suck in other areas.
Wysihtml seems to apply inline CSS. Can it easily apply a class too?

~~~
olla
It can apply classes too as you wish. You can use formatInline or formatBlock
command to add inline or block elements with needed classes. An example how
its done internally
[https://github.com/Voog/wysihtml/blob/master/src/commands/fo...](https://github.com/Voog/wysihtml/blob/master/src/commands/foreColor.js)

------
mhd
Is there some way to sanitize the output? The prevalence of <br><br> is
something I've always disliked about WYSIWYG HTML editors (something a
markdown converter doesn't have to struggle with, usually).

I can do paragraphs by not manually breaking lines and instead select the
second paragraph's content, then apply the "normal text" style, but this isn't
exactly intuitive.

Or one could disallow further linebreaks and thus just create paragraphs when
you're entering a linebreak.

~~~
lhl
Wordpress has had this forever:
[http://codex.wordpress.org/Function_Reference/wpautop](http://codex.wordpress.org/Function_Reference/wpautop)

Like most of WP, the code is ugly, but battle-tested.

------
BenjaminN
"Fast and lightweight" is 200ko?

We have so many choices when it comes to WYSIWYG. My favorite is
[https://github.com/daviferreira/medium-
editor](https://github.com/daviferreira/medium-editor).

~~~
olla
You are right, 200k is not the lightest out there and there is room for
improvement. Trying to keep it as light as possible though without sacrifice
in functionality like handling nested tables with merged cells etc.

------
kemayo
A few feedback points, I suppose...

# Clicking the "no-color" option in the text color-picker doesn't do anything.

# Using the "remove" option on a link inserts a space as well as removing the
link, which seems incorrect.

# Using the "remove" option on a link doesn't always remove the entire link.
Repro on [http://wysihtml.com/](http://wysihtml.com/) by selecting the word
"typewriter", adding a link, then clicking on it again and removing the link.
Depending on where you clicked either "type" or "writer" will still be linked.

# Repeatedly toggling tags can get weird. e.g. select a word and keep on
clicking the bold/italic/underline button, and note how it'll toggle the tag
on, toggle it off, and then just start adding spaces in front of it with every
subsequent click.

# Possibly related to the spaces issue, after toggling tags for a bit checking
the source generated shows a lot of empty-tags, which is kind of messy.

~~~
olla
Thanks for pointing these issues out. Some of them are known to us and
rewriting the handling of inline tags is actually in the todo queue already.

~~~
kemayo
They're all really minor issues, but they're also fairly easy to trigger in
the initial "I'll play with this to see how it works" phase, which is fairly
critical for persuading people to actually decide to use it for their project.
:)

------
andybak
> Unifies line-break handling across browsers (hitting enter will create <br>
> instead of <p> or <div>)

This implies it isn't configurable and unfortunately - in my view this is the
incorrect direction to unify in.

Hasn't even MS Word nowadays standardized on Enter=paragraph break,
Shift+Enter=line break

~~~
neals
Shift+Enter is not known very well, at least by my clientelle...

------
NARKOZ
For your rails apps you can use 'wysihtml5-rails' gem.

[https://github.com/narkoz/wysihtml5-rails](https://github.com/narkoz/wysihtml5-rails)

Author plans to update it to use wysihtml as a drop-in replacement.

~~~
tanelj
Actually there is a new gem for Rails called "wysihtml-rails"
([https://github.com/Voog/wysihtml-rails](https://github.com/Voog/wysihtml-
rails)) that is synced with this library.

------
cstigler
FWIW, we've been pretty happy with the Froala Editor:
[https://editor.froala.com/](https://editor.froala.com/)

------
fredkelly
Having had the (dis)pleasure of working with TinyMCE on a number of past
projects this looks like a no-brainer. The only thing I'm not sure about is
the use of `data-wysihtml5-command` attributes to configure the toolbar, is
there an option to configure this via a configuration object in JS? - e.g. I
just pass the ID of the element I want to use and a set of options?

~~~
olla
Currently the toolbar component does not allow this kind of configuration.
Probably the easiest to accomplish this currently is to write Your own custom
toolbar
like[https://github.com/Voog/wysihtml/blob/master/examples/wotool...](https://github.com/Voog/wysihtml/blob/master/examples/wotoolbar.html#L251)
or make a pull request that I'll be glad to merge.

~~~
fredkelly
Thanks, I'll check it out. PR is always a possibility too :)

------
j_s
There are a lot of commercial options available too; I was reminded of the
'How I reverse-engineered Google Docs' discussion where the author recommended
paying $200 for Redactor. Releasing an easily usable full-featured rich text
editor is a generous gift!

------
metara
so timid

Try out their beautiful working app: [http://voog.com](http://voog.com)

~~~
rolfvandekrol
Funny, they named their barebones theme after
[http://en.wikipedia.org/wiki/Pripyat](http://en.wikipedia.org/wiki/Pripyat)
:D.
[http://voog.com/signup?language_code=en](http://voog.com/signup?language_code=en)
('Choose' button at the bottom next to the text about the blank slate).

~~~
runnel
Well, and that city really is just 'bare' and 'bones' :(

------
swalsh
This is very cool, I've used the Telerik editor
([http://demos.telerik.com/kendo-
ui/editor/index](http://demos.telerik.com/kendo-ui/editor/index)) control in
the past, but this might be a decent competitor.

------
WimLeers
Why fork something that is incomplete, unstable, has very limited test
coverage, and doesn't tightly control the generated markup?

CKEditor has had the ACF (Advanced Content Filter) for >1.5 years now. It
allows you to very tightly control which tags and attributes are allowed.

This feature, and the rest of CKEditor has much, much more test coverage to
account for the many browser quirks (notably in contentEditable) that they
have had to work around, to prevent regressions. It's a waste of time for
everybody to solve the same problems and work around the same browser quirks
over and over again.

The "Ability to add uneditable area inside editor text flow (useful when
building modules like video tools, advanced image editor etc)." feature is
probably the only interesting feature. But it's nothing compared to CKEditor
Widgets, which does exactly this, and much more (think storing structured
content but transforming it to the specific markup that a frontend developer
wants). Just compare Wysihtml's "advanced" demo to the CKEditor Widgets demo:
[http://docs.ckeditor.com/#!/guide/dev_widgets](http://docs.ckeditor.com/#!/guide/dev_widgets)

See
[http://docs.ckeditor.com/#!/guide/dev_advanced_content_filte...](http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter)
for more about ACF and
[http://docs.ckeditor.com/#!/guide/dev_widgets](http://docs.ckeditor.com/#!/guide/dev_widgets)
for more about Widgets.

And yes, it's open source: GPL/LGPL/MPL/commercial:
[http://ckeditor.com/about/license](http://ckeditor.com/about/license)

If we'd collaborate more rather than reinventing the wheel, we'd get so much
further. One does not just write a WYSIWYG editor…

~~~
chrislgrigg
I took part in a hackathon a few weeks ago and we needed a text editor that we
could easily implement and customize. In particular, we wanted more control
over the appearance of the toolbar -- we wanted to use our own buttons and
move them vertically to the left of the text area -- and needed to capture
events related to entering text.

We started with CKEditor, found it far too complicated and with a ton of old
and unclear documentation floating around, and had to work against its default
features to get it scaled back to the minimal editor we wanted. We weren't
able to move the buttons to the left-hand side and couldn't style them as
easily as we wanted to. Maybe it's buried deep in the docs somewhere but I
couldn't tell you, there's a lot there and it's overwhelming for someone who's
just getting started and on a time constraint.

Frustrated, we switched to WYSIHTML5 and were able to get exactly what we were
looking for very quickly.

I've come to see CKEditor as the WordPress of WYSIWYG text editors: it aims to
do ABSOLUTELY EVERYTHING for everyone, but that's not what everyone is looking
for. Maybe things would have gone differently if we weren't under the gun but
when we were in a pinch, we found WYSIHTML5 to be a much better option.

------
matthew86
Thanks! Been looking for such editor. Will try it out soon.

------
LukeB_UK
It seems to suffer from tags being left over even after all their content has
been deleted. Many editors seem to suffer this too.

------
acomjean
Cool.

but why no jquery?

Just asking.

As someone who ported a embedded website away from jquery, it was painful, and
I've come to really appreciate it

~~~
olla
Firstly jQuery would not help a lot here, as wysiwygs are largely about fixing
browser inconsistencies and bugs. You'd like to fix those as close to the
source as possible. The other quite big argument is that events triggered in
jQuery cannot be seen by other modules correctly. Even not by another jQuery
instance. In CMS-es on the other hand you can easily be dealing with many
jQuery instances. One on the site itself and another for administration
components. Vanilla.js makes things on this scale smaller too.

------
partsteet
Looks nice.

------
kaspar-naaber
Cool!

------
curiously
so after I create an html how do I "export" out the html code?

