Skip to content
Star
.github-star { padding-left: 15px; margin-bottom: 15px; }

3rd Party Integration

TUI Advanced Image Editor

Use TUI Image Editor to add advanced image editing options.


Try it yourself:

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="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" alt="Old Clock" width="300"/>
</div>

CSS

<!-- 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

<!-- 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>
File: 1467