Full Featured Froala Editor V3

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/plugins/track_changes.min.js"></script>
<div id="froala-editor">
https://viblo.asia/q/hoi-ve-image-trong-froala-editor-7LKX9WwDZV4 <br>
upload image and insert caption
</div>

CSS

.image-description {
    color: rgba(0,0,0,0.6);
    display: block;
    outline: 0px solid transparent;
    text-align: center;
    font-size: 14px;
    min-height: 20px;
}
figure figcaption.image-description[contenteditable=true]:empty:before {
    color: #b3b3b1;
    content: attr(placeholder);
    display: block;
}

JavaScript

new FroalaEditor('#froala-editor',  {
	toolbarButtons: ['insertImage'],
  events: {
    'image.inserted': function ($img, response) {
      // Do something here.
      // this is the editor instance.
      console.log($img);
      $img.wrap(`<figure class="aligncenter"></figure>`);
      $img.after(`<figcaption contenteditable="true" placeholder="Chú thích ảnh (không bắt buộc)" class="image-description"></figcaption>`);
    }
  }
});