Summernote – Super Simple WYSIWYG Editor on Bootstrap

There's a good list of them here: https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIW...

Really liked the idea of Quill and their usage of rich-text. Didn't use it because of lack of tables and the effort of moving our storage of data to rich-text... But I was very tempted, and still not certain I made the right decision.

We went with CKEditor instead, and while it is extensible and the developers are responsive, it is a LOT of work to integrate with JS-heavy front-ends. They use setTimeout() liberally, and don't recover gracefully from ascendant DOM changes. (like being removed from the DOM without being destroyed). That said, it is the most feature-full, open-source editor in active development...

The state of web-based editors is... a mess... and there seem to be new ones popping up constantly, while old ones go stale. So, yet another generation of young devs whose time will be wasted solving the basic, known problems of contenteditable, while quill, scribe, wysihtml, goog.wysiwyg, aloha-editor, tinymce, ckeditor, redactor and likely a dozen others need help.

(and what I really want is ace or kix... a content-editable-less editor)

In my experience, they all seem to fall down with:

(1) Lists, especially indenting and nesting properly. (2) Tables. Everything about tables. (3) Pasting rich text from other apps. (4) Accumulating invisible formatting data.

From what I've read, if your library uses "contentEditable" and tries to clean up after it, you're in for a bad time. Instead, the best thing is to write your own engine, like Google Docs did (this is of course very difficult and no one has mastered it).

I'll give yours a shot!

The thing that constantly frustrates me is being unable to return to a previous state without using undo.

In the OP, for example, create a table, go to a cell, press return (creating a second line), and then press delete. You're basically left with a p inside a td, when before there wasn't one. I feel like if you press a key and then press delete, you should go back to the exact state you were in before (or maybe after pressing delete twice).

Another thing that bugs me is when elements that should be rejoined after a split are not rejoined. For instance, if you inadvertently split a ul in two by hitting return one too many times, and then you press delete, with many editors you will now have two ul elements (and potentially weird spacing in the middle of the list in the final rendering). Another example: removing and then re-adding italics to a paragraph that had been 100% italics before the edit. Before, you had one i element, but now you might have three. I've seen some editors handle these cases some of the time, but I haven't found one that handles them 100% of the time.

In terms of features, I have always looked for the ability to visually edit Bootstrap or Foundation columns. It would be great to be able to add column systems to an editable space, and then re-size them, or even nest them.

You could copy code from Summernote to a textarea using javascript. Some examples can be found here [1]. But you are right, I do not know why the authors decided to completely forgo textarea. Any way, nothing wrong with TinyMCE either.

[1] http://stackoverflow.com/questions/22136242/textarea-value-c...

You actually don't have to use a <div>, you can use a textarea or any form element. However, the catch is that if you just grab the form elements on submit you have to keep the html elements. There are a couple options here:

1. The simplest way is to put an onsubmit in your form element that handles this.

Example:

<script>

var postForm = function() { var content = $('textarea[name="content"]').html($('#summernote').code()); } </script>

<form action="#" method="POST" onsubmit="return postForm()"> .... </form>

2. The other way is to use an onchange for the summernote element. Every time it changes it updates the textarea with the appropriate code.

Example: $(document).ready(function() { $('#summernote').summernote({ onKeyup: function(e) { $("#summernoteContent").val($("#summernote").code()); }, height: 300, }); });

where #summernoteContent is your textarea.

EDIT TO ADD: Now with that said, my biggest issue is that the documentation is not clear on many things. Especially the API. Summernote has a pretty good API available, but it is poorly documented and is constantly evolving.

At my first internship almost a decade ago, I spent a day and a half trying to fix up one of the free WYSIWYG editors out there. So many edge cases and weird bugs; and I was trying to hack in some new features. Lots of options, all 80% of what I needed.

My boss goes to to me "uh, use the company credit card and buy the nicest one you can find". What a waste of money, I thought. There's free ones out there!

"Think about how much you get paid. And then think about how much time and money you've spent trying to hack a free one to work."

WYSIWYG editors are insanely complex, with thousands of possible edge cases. I love Open Source, but for ~$50, paying for a good one is a steal. I wish more JS libraries cost a nominal fee; it'd give developers the means to do a more thorough job on them. And given the time savings, it'd actually be more cost efficient than "free".

Same, the existing solution arr soo bloated and jard to customized. (Despising ckeditor currently)

I'll check if this supports flowtype, if it does, I'm sold!