Ответ 1
Используя summernote API
Я придумал это решение:
$(document).ready(function() {
$('#summernote').summernote({
onKeyup: function(e) {
$("#lawsContent").val($("#summernote").code());
},
height: 300,
});
});
Я установил div для summernote, чтобы изменить текст, извлеченный из базы данных.
<div id="summernote" class="form-control"><?php echo $laws['content']; ?></div>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
});
});
непосредственно после div у меня есть текстовая область с идентификатором.
<textarea id="lawsContent"></textarea>
Я хочу, чтобы содержимое текстового поля менялось при вводе в summernote div. Точно так же, как то, что происходит, когда я печатаю этот вопрос.
Используя summernote API
Я придумал это решение:
$(document).ready(function() {
$('#summernote').summernote({
onKeyup: function(e) {
$("#lawsContent").val($("#summernote").code());
},
height: 300,
});
});
Я думаю, что лучше обработать событие onChange.
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>
Вдохновленный @user3367639, это более общий способ сделать это
$('.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
}
});
});
И с помощью этого метода:
String.prototype.strip = function()
{
var tmpDiv = document.createElement("div");
tmpDiv.innerHTML = this;
return tmpDiv.textContent || tmpDiv.innerText || "";
}
В вашем JS-контроллере вы можете сделать что-то подобное, чтобы получить текстовое значение вашего текстового поля
$myTextArea.val().strip(); //Where val() returns the html and strip() returns the text
Надеюсь, это поможет
Используйте этот пример:
<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>
<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());
}
});
});
Это сработало для меня