JSFiddle - React, Tailwind, and code Playground

Summernote Bootstrap 3 Demo, Super Simple WYSIWYG editor on Bootstrap - Using image-attribute plugin

by wakematta

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote.min.js"></script>
<script src="https://raw.githubusercontent.com/DiemenDesign/summernote-image-attributes/master/summernote-image-attributes.js"></script>
<textarea id="summernote">
  <p>
    <img src="https://user-images.githubusercontent.com/3450257/39814290-07fd58c6-5394-11e8-84e3-777fe17fc08f.jpg">
    <br>
  </p>
</textarea>

CSS

body { padding: 40px; }

JavaScript

$('#summernote').summernote({
	popover: {
  	image: [
    	['custom', ['imageAttributes']],
      ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
      ['float', ['floatLeft', 'floatRight', 'floatNone']],
      ['remove', ['removeMedia']]
    ],
  },
  lang: 'en-US', // Change to your chosen language
  imageAttributes: {
		icon: '<i class="note-icon-pencil"/>',
    removeEmpty: false, // true = remove attributes | false = leave empty if present
    disableUpload: false // true = don't display Upload Options | Display Upload Options
	}
});