JSFiddle - React, Tailwind, and code Playground
Summernote Bootstrap 3 Demo, Super Simple WYSIWYG editor on Bootstrap - Using image-attribute plugin
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">
</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: '',
removeEmpty: false, // true = remove attributes | false = leave empty if present
disableUpload: false, // true = don't display Upload Options | Display Upload Options
}
});