Summernote – Super Simple WYSIWYG Editor on Bootstrap(summernote.org)
summernote.org
Summernote – Super Simple WYSIWYG Editor on Bootstrap
http://summernote.org/
12 comments
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)
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'm creator of summernote. Actually I agreed with you comment. So I try to implement non-content-editable editor. https://github.com/summernote/winternote
There's a good list of them here: https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIW...
There's a bunch of new WYSIWYG editors popping up lately. I'm working on my own here:
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
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
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.
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.
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!
(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!
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.
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.
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.
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 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" 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.
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" 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.
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...
[1] http://stackoverflow.com/questions/22136242/textarea-value-c...
Yea, I initially started down that route but realized I could have exactly what I needed with TinyMCE by just pulling it in with a CDN and a textarea.
Nice to have options.
Nice to have options.
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.
I will use this in my next project.
I will use this in my next project.
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".
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".
Nice editor. I also recommend taking a look at inline editors, like Aloha http://www.alohaeditor.org/demo/aloha-ui/
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
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
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).
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 personally know summernote developer.
He is really eager to make it to world best stuff.
Congrats. I cheer you up.
Good editor. I also like Medium's clone - https://github.com/yabwe/medium-editor.
Also ritzy: https://github.com/ritzyed/ritzy
Amazing, I've always despised TinyMCE. Great share.
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!
I'll check if this supports flowtype, if it does, I'm sold!
really great editor - i use it on my side projects, i especially like that it uses FileReader API for image file uploads