TUI Advanced Image Editor V3

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/js/third_party/image_tui.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>
<div id="froala-editor">
  <p>Click on the image then use the advanced edit button to launch the Aviary image editor plugin.</p>
  <img class="fr-dib" src="http://knowledge.wharton.upenn.edu/wp-content/uploads/2016/01/compassion.jpg" alt="Happy" width="300"/>
</div>

JavaScript

new FroalaEditor('div#froala-editor',{imageEditButtons: ['imageTUI']});