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.<p>The Voog team
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.<p>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.<p>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?
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).<p>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.<p>Or one could disallow further linebreaks and thus just create paragraphs when you're entering a linebreak.
"Fast and lightweight" is 200ko?<p>We have so many choices when it comes to WYSIWYG. My favorite is <a href="https://github.com/daviferreira/medium-editor" rel="nofollow">https://github.com/daviferreira/medium-editor</a>.
A few feedback points, I suppose...<p># Clicking the "no-color" option in the text color-picker doesn't do anything.<p># Using the "remove" option on a link inserts a space as well as removing the link, which seems incorrect.<p># Using the "remove" option on a link doesn't always remove the entire link. Repro on <a href="http://wysihtml.com/" rel="nofollow">http://wysihtml.com/</a> 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.<p># 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.<p># 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.
> Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>)<p>This implies it isn't configurable and unfortunately - in my view this is the incorrect direction to unify in.<p>Hasn't even MS Word nowadays standardized on Enter=paragraph break, Shift+Enter=line break
For your rails apps you can use 'wysihtml5-rails' gem.<p><a href="https://github.com/narkoz/wysihtml5-rails" rel="nofollow">https://github.com/narkoz/wysihtml5-rails</a><p>Author plans to update it to use wysihtml as a drop-in replacement.
FWIW, we've been pretty happy with the Froala Editor: <a href="https://editor.froala.com/" rel="nofollow">https://editor.froala.com/</a>
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?
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!
This is very cool, I've used the Telerik editor (<a href="http://demos.telerik.com/kendo-ui/editor/index" rel="nofollow">http://demos.telerik.com/kendo-ui/editor/index</a>) control in the past, but this might be a decent competitor.
Why fork something that is incomplete, unstable, has very limited test coverage, and doesn't tightly control the generated markup?<p>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.<p>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.<p>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: <a href="http://docs.ckeditor.com/#!/guide/dev_widgets" rel="nofollow">http://docs.ckeditor.com/#!/guide/dev_widgets</a><p>See <a href="http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter" rel="nofollow">http://docs.ckeditor.com/#!/guide/dev_advanced_content_filte...</a> for more about ACF and <a href="http://docs.ckeditor.com/#!/guide/dev_widgets" rel="nofollow">http://docs.ckeditor.com/#!/guide/dev_widgets</a> for more about Widgets.<p>And yes, it's open source: GPL/LGPL/MPL/commercial: <a href="http://ckeditor.com/about/license" rel="nofollow">http://ckeditor.com/about/license</a><p>If we'd collaborate more rather than reinventing the wheel, we'd get so much further. One does not just write a WYSIWYG editor…
Cool.<p>but why no jquery?<p>Just asking.<p>As someone who ported a embedded website away from jquery, it was painful, and I've come to really appreciate it