3rd Party Integration

TUI Advanced Image Editor

• Click on the image
• Click on the "Advanced Edit" button
• Start editing
• Save your changes

Try it yourself:

Edit in JSFiddle

HTML

Copy

<div id="froala-editor">
  <p>Click on the image then use the advanced edit button to launch the TUI Advanced image editor plugin.</p>
  <img class="fr-dib" src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" alt="Old Clock" width="300"/>
</div>

CSS

Copy

<!-- Include TUI CSS. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.css">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">

<!-- Include TUI Froala Editor CSS. -->
<link rel="stylesheet" href="../css/third_party/image_tui.min.css">

JAVASCRIPT

Copy

<!-- Include TUI JS. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>

<!-- Include TUI plugin. -->
<script type="text/javascript" src="../js/third_party/image_tui.min.js"></script>

<script>
  new FroalaEditor('div#froala-editor');
</script>