Summernote demo

Summernote demo

by kevalpanchal

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 <textarea class='summernote' id='summernote' rows='10'></textarea>

JavaScript

$('#summernote').summernote({
  height: '150',
  toolbar: [
    ['view', ['fullscreen', 'codeview', 'undo', 'redo']],
    ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontname', ['fontname']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['Insert', ['hr']]
  ],
  codeviewFilter: true,
  codeviewFilterRegex: '/<\/*(?:applet|b(?:ase|gsound|link)|embed|frame(?:set)?|ilayer|l(?:ayer|ink)|meta|object|t(?:itle|extarea)|xml)[^>]*?>/gi'
});

var HTMLstring = '<div><span></span><span></span><span></span><span></span><span style="font-weight: bolder;">BIOPSY NO&nbsp; : P-0123456</span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder;">SPECIMEN&nbsp; &nbsp; :&nbsp;</span><b>20220101207</b></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder; font-size: 12px;">G<span style="font-size: 14px;">ROSS EXAMINATION&nbsp; : ok</span></span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder; font-size: 14px;">MICROSCOPIC EXAMINATION&nbsp; : ok</span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder;"><br></span></div><div><span style="font-weight: bolder; font-size: 14px;">IMPRESSION&nbsp; &nbsp;: ok</span></div>';
$('#summernote').summernote('pasteHTML', HTMLstring);