Как редактировать текст в поле span или div через поле summernote

Question

У меня есть две кнопки, одна из которых - Редактировать и Сохранить. У меня есть div или span, поэтому по нажатию кнопки редактирования я хочу преобразовать span или div в редактор Summernote и нажмите Save, чтобы сохранить данные в том же div и удалить редактор Summernote.

Я не нашел никакой полезной информации на веб-сайте summernote, пожалуйста, предложите правильный метод.

Answer 1

Когда вы нажимаете кнопку «Изменить», вы можете скрыть свой div / span. С кодом jQuery это может быть

<div id="summernote">/div>
<button id="edit-button">Edit</button>
<div id="editor"></div>
<button id="save-button">Save</button>

//JS
$('#edit-button').click(function() {
    $('#summernote').hide();
    $('#editor').show();
});
$('#save-button').click(function() {
    $('#summernote').show();
    $('#editor').hide();
});

Answer 2

Summernote предоставляет наглядный пример для удовлетворения ваших потребностей, вы можете найти его здесь .

var edit = function() {
  $('.click2edit').summernote({focus: true});
};

var save = function() {
  var markup = $('.click2edit').summernote('code');
  $('.click2edit').summernote('destroy');
};

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->

<link href="https://summernote.org/vendors/summernote/dist/summernote.css" rel="stylesheet"> 
<script src="https://summernote.org/vendors/summernote/dist/summernote.js"></script>

<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Show Edit Mode</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Hide Edit Mode</button>
<div class="click2edit">click2edit</div>