3rd Party Integration

TUI Advanced Image Editor

Use TUI Image Editor to add advanced image editing options.


Click on the image then use the advanced edit button to launch the TUI Advanced image editor plugin.

Old Clock

Edit in JSFiddle

HTML

<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="/assets/editor/docs/photo14.jpg" alt="Old Clock" width="300"/>
</div>

CSS

<!-- Include TUI CSS. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/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

<!-- 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/tui-code-snippet@1.4.0/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/tui-image-editor.min.js"></script>

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

<script>
  $(function() {
    $('div#froala-editor').froalaEditor();
  });
</script>