3 ms·

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 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.

x0054 11y ago
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-change-when-summernote-div-is-changed http://stackoverflow.com/questions/22136242/textarea-value-c...
- Implicated 11y ago
  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.
jeffmould 11y ago
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.

x0054 11y ago

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-change-when-summernote-div-is-changed http://stackoverflow.com/questions/22136242/textarea-value-c...

Implicated 11y ago
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.

jeffmould 11y ago

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.