Summernote Bootstrap 3 Demo

Summernote Bootstrap 3 Demo, Super Simple WYSIWYG editor on Bootstrap

by Gabriel Rodrigues

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css">
<script src="https://rawgit.com/creativeprogramming/summernote-addclass/master/summernote-ext-addclass.js"></script>
<ul class="list-group">
  <li class="list-group-item"><span class="label label-primary">[PHONE]</span> Telefone da Empresa.</li>
  <li class="list-group-item"><span class="label label-primary">[FAX]</span> Telefax da Empresa.</li>
  <li class="list-group-item"><span class="label label-primary">[EMAIL_1]</span> Primeiro Email da Empresa.</li>
  <li class="list-group-item"><span class="label label-primary">[EMAIL_2] </span> Segundo Email da Empresa.</li>
</ul>

<div id="summernote"></div>

JavaScript

jsfi$('#summernote').summernote({
  height: 300
});

$(".list-group li span").click(function() {
  $('#summernote').summernote('editor.saveRange');
  $('#summernote').summernote('editor.restoreRange');
  $('#summernote').summernote('editor.focus');
  $('#summernote').summernote('editor.insertText', $(this).text());
});