Looks solid. I, for one, am glad to see an alternative to the paid ones out there that don't offer free versions when you don't want to use their extra features.
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".
I was in the market for an editor on a new side-project a few days ago, ran across this and was going to use it until I took a look at the integration details.
I've been using TinyMCE for a while (bunch of projects) and had gotten pretty used to the editor replacing a <textarea> element, and submitting with forms. It doesn't look like Summernote takes this route?
Add div into body; this targeted element will later be rendered to summernote editing tool.
> Add div into body; this targeted element will later be rendered to summernote editing tool.
> <div id="summernote">Hello Summernote</div>
If this project needed to be ajax-y this would work fine, but I'm not capturing the form elements with JS, instead using traditional form submits, and I'm not seeing that this would work?
Looks great otherwise, love to see some good alternatives being developed.
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.
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>
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.
I'm using this on a ecommerce platform http://shopkeeperplatform.com i'm working on . Summernote is pretty good : it's small, fast and very easy to integrate.
Also it deals with uploaded files a bit different because by default it encodes the file in base64 (instead of posting them separately to server).
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).
Sadly, we built an editor that solved all of these problems but we got virtually any traction in terms of sales (it was $99). Was considering re-releasing it as a WYSIWYG markdown editor because I think the market is more clear.
I hear you with respect to the difficulty in getting it right. Sometimes we would have a few lines of code and then 50 lines describing why the code was necessary in order to get around weird edge case behavior in one version of one browser.
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.
Ended up having too many customization problems with Summernote and Angular on our current project and switched to Quill (http://quilljs.com/) instead. Both are pretty good projects though, and each have room to grow into something bigger.
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)
23 comments
[ 2.7 ms ] story [ 61.9 ms ] threadI will use this in my next project.
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".
I've been using TinyMCE for a while (bunch of projects) and had gotten pretty used to the editor replacing a <textarea> element, and submitting with forms. It doesn't look like Summernote takes this route?
Add div into body; this targeted element will later be rendered to summernote editing tool.
> Add div into body; this targeted element will later be rendered to summernote editing tool.
> <div id="summernote">Hello Summernote</div>
If this project needed to be ajax-y this would work fine, but I'm not capturing the form elements with JS, instead using traditional form submits, and I'm not seeing that this would work?
Looks great otherwise, love to see some good alternatives being developed.
[1] http://stackoverflow.com/questions/22136242/textarea-value-c...
Nice to have options.
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.
Also it deals with uploaded files a bit different because by default it encodes the file in base64 (instead of posting them separately to server).
I'll check if this supports flowtype, if it does, I'm sold!
https://github.com/joshmarinacci/semantic-editor-js
Questions: What do you look for in an editor? Where do the existing ones fall down? What would you like see done differently?
thx
(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!
I hear you with respect to the difficulty in getting it right. Sometimes we would have a few lines of code and then 50 lines describing why the code was necessary in order to get around weird edge case behavior in one version of one browser.
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.
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)
I had previously written a node.js module that uses it for embedding little CMS content blocks on a web site http://contentblocks.herokuapp.com