Link to the plugin page:
Demo to preview the plugin:
Introduction
The Editable Text Elements Plugin allows various text elements, including
<pre> and others, to become editable instantly through a workflow action. The plugin also features an autobinder, which saves the text upon the stop editing action.This plugin enables a seamless inline editing experience, making it useful for building Rich Text Format (RTF) elements, secure fields, and validation-driven text inputs. By default, browsers will display different right-click options based on whether editing is enabled or disabled. Additionally, any text elements from other plugins or the HTML element can be made editable using this plugin.
For example, a simple
<pre></pre> element can be transformed into a code-writing element. Furthermore, it enhances security since bots searching for input fields (e.g., email & password) would not detect <p> or <div> elements until the user manually triggers editing.See Key Features
Prerequisite
- Bubble Account: An active Bubble.io account is required to install and use the plugin.
- Plugin Installation: The plugin can be installed directly from the Zeroqode Plugin Store or from the Plugins section of your Bubble Editor.
- Your app has an element ID enabled (Bubble settings → General → Expose the option to add an ID attribute to HTML elements).
- For instructions on setting the ID attribute for a Bubble element, please refer to this https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469.
How to setup
Step 1: Installation
Step 2: Configure the Plugin
Step 3: Create a Data Type
Step 4: Design Your Page
Step 5: Use the Plugin in Workflows
Plugin Element Properties
EditableText
The EditableText element allows text to become editable upon triggering a workflow action.
Element Actions
- Allow Editing
Title | Description | Type |
Target’s ID, Class, or Tag | The ID, class, or tag of the target text element to enable editing. | Text |
Show Edit Cursor? | Displays a text cursor when editing is enabled. | Checkbox (yes/no) |
- Stop Editing
Title | Description | Type |
Target’s ID, Class, or Tag | The ID, class, or tag of the target text element to stop editing. | Text |
Enable Autobinding? | Automatically saves the edited content when editing is stopped. | Checkbox (yes/no) |
Exposed states
Title | Description | Type |
Finished Editing | Indicates whether the user has completed editing. | Checkbox (yes/no) |
New Edit Content | Stores the new edited content. | Text |
Element Events
Title | Description |
Editing | Triggered when a text element is being edited. |
Finished Editing | Triggered when the user stops editing a text element. |
