<aside> ✅ Link to plugin page: https://zeroqode.com/plugin/toast-ui-image-editor-plugin-for-bubble-1689612769469x292634111793830240

</aside>

Demo to preview the settings

<aside> ✅ Demo page: https://ezcodepluginsdemo.bubbleapps.io/tui_image_editor

</aside>

<aside> ✅ Bubble Editor: https://bubble.io/page?&name=tui_image_editor&id=ezcodepluginsdemo

</aside>

Introduction

Multifunctional image editor. Dynamically Crop, Flip, apply Filters, Draw. Add Shapes, text, icons etc. Save it all as one png file. Full control from workflow or use predefined UI for desktop and mobile.

Widely supported in mobile and desktop browsers including IE10.

banner-need-help-last.webp

How to setup

  1. To start you need to create an element TUI - ImageEditor default.

    Untitled

  2. Fill in field “Dynamic Image”.

  3. Ready. Click “Preview Page” to check.

Plugin Element Properties

TUI - ImageEditor default

Untitled

Fields:

Title Description Type
Show default logo If checked, shows “Toast UI Image Editor” on the top left corner of the editor. Checkbox (yes/no)
Menu position Position of the toolbar menu. Available options: Left, Top, Right, Bottom. Text
Download Image Download or publish in a state in base64 format Checkbox (yes/no)
Preloaded image Image for editing by default. Image (optional)
Change default texts
Download Change text for Download button. Text
Cancel Change text for Cancel button. Text
Apply Change text for Apply button. Text
Reset Change text for Reset button. Text
Load Change text for Load button. Text
Delete All Change text for Delete All button. Text
Crop Change text for Crop button. Text
Custom icon Change text for Custom icon button. Text

Element Actions

  1. Upload to File Manager - converts the edited image from base64 to a Blob, creates a file object, and uploads it to Bubble's file manager, publishing the file URL and triggering a custom event upon successful upload.