I have setup a div for the summernote to alter text pulled from a database.
I think it is better to handle the onChange event.
v0.7.0
$('#summernote').summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
}
}
});
$(document).ready(function(){
$("#summernote").summernote(
{
height: "10em",
callbacks: {
onChange: function (contents, $editable) {
var code = $(this).summernote("code");
$("#lawsContent").val(code);
}
}
}
);
});
#lawsContent
{
width: 100%;
height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.min.css" rel="stylesheet"/>
Editor:
<div id="summernote" class="form-control"></div>
Output:
<textarea id="lawsContent" class="form-control"></textarea>
v0.6.5
As of this version, callback only works with camel case string.
$('#summernote').summernote({
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
}
});
$(document).ready(function(){
$("#summernote").summernote(
{
height: "10em",
onChange: function (contents, $editable) {
$("#lawsContent").val(contents);
}
}
);
});
#lawsContent
{
width: 100%;
height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
Editor:
<div id="summernote" class="form-control"></div>
Output:
<textarea id="lawsContent" class="form-control"></textarea>
Use This Example:
<form id="form_id" action="/summernote.php" onsubmit="return postForm()">
<textarea id="summernote" rows="6" name="textarea_name" ></textarea>
</form>
<script type="text/javascript">
$(document).ready(function(){
var postForm = function() {
var content = $('textarea[name="textarea_name"]').html($('#summernote').code());
}
});
</script>
$('textarea').summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
}
}
})
<form>
<textarea name="content" onChange></textarea>
</form>
Using the summernote API
I came up with this solution:
$(document).ready(function() {
$('#summernote').summernote({
onKeyup: function(e) {
$("#lawsContent").val($("#summernote").code());
},
height: 300,
});
});
Inspired by @user3367639, this is a more generic way to do it
$('.summernote').each(function () {
var $textArea = $(this);
$textArea.summernote({
onKeyup: function (e) {
$textArea.val($(this).code());
$textArea.change(); //To update any action binded on the control
}
});
});
And with this method :
String.prototype.strip = function()
{
var tmpDiv = document.createElement("div");
tmpDiv.innerHTML = this;
return tmpDiv.textContent || tmpDiv.innerText || "";
}
You could do in your JS controller something like this to get the text value of your textarea
$myTextArea.val().strip(); //Where val() returns the html and strip() returns the text
Hope this will help
<div role="tabpanel" class="tab-pane" id="product_desc_l">
<p>
First impressions are everything. <br> <br>
</p>
<strong>Features:</strong>
</div>
<textarea id="product_desc_long" name="product_desc_long" class="summernote form-control" rows="10" placeholder="Enter the product long description..."></textarea>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
onKeyup: function(e) {
$("#product_desc_l").html($(this).code());
}
});
});
This worked for me