Search code examples
javascripthtmlcsssummernote

How to edit text in a span or div through summernote field

I have two buttons one is Edit and Save. I have a div or span so onclick of edit button I want to convert the span or div in to a summernote editor and onclick Save it will save the data to same div and will remove the summernote editor.

I did not find any helpful information from summernote website, please suggest the right method.

enter image description here

Solution

  • Summernote does provide a clear example to fullfil your needs, you may find it here.

    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>