Plugin details
TinyMCE WYSIWYG Editor Plugin
### Dokumentacja Pluginu "GloDitor" (TinyMCE Editor)
#### 1. Opis Ogólny
Plugin "GloDitor" integruje zaawansowany edytor tekstu WYSIWYG (What You See Is What You Get) TinyMCE z aplikacją Bubble.io. Umożliwia tworzenie i edycję bogatej treści HTML, idealnej do budowy szablonów e-mail, artykułów, postów na blogu czy dowolnych innych treści wymagających formatowania.
Plugin został zaprojektowany z myślą o elastyczności i pełnej kontroli nad treścią, włączając w to możliwość edycji całych dokumentów HTML (wraz ze znacznikami <html>, <head> i <body>).
#### 2. Kluczowe Funkcjonalności
Pełna Edycja Rich Text: Obsługa standardowych opcji formatowania, takich jak pogrubienie, kursywa, listy, kolory, rozmiary czcionek, wyrównanie tekstu itp.
Edycja Całych Dokumentów HTML: Dzięki wbudowanemu pluginowi fullpage, edytor poprawnie obsługuje wklejanie i edycję kompletnych szablonów HTML (np. z maili), nie usuwając kluczowych tagów strukturalnych.
Edycja Kodu Źródłowego: Dostępny przycisk "Source Code" (</>) pozwala na bezpośrednią edycję kodu HTML.
Konfigurowalny Interfejs: Możliwość zmiany języka interfejsu (domyślnie Polski) oraz jednostek rozmiaru czcionki (domyślnie px).
Dynamiczne Zarządzanie Treścią: Treść edytora może być ustawiana dynamicznie za pomocą akcji w workflow, co pozwala na ładowanie szablonów z bazy danych.
Stany Wyjściowe (Exposed States): Plugin na bieżąco udostępnia aktualną zawartość edytora oraz informację, czy jest on pusty, co umożliwia tworzenie podglądów na żywo i logiki warunkowej.
#### 3. Konfiguracja Elementu
Po przeciągnięciu elementu "GloDitor" na stronę, w panelu "Appearance" dostępne są następujące pola konfiguracyjne:
API Key: (Wymagane) Klucz API z Twojego konta TinyMCE. Niezbędny do działania edytora.
Initial Content: (Opcjonalne) Treść HTML, która zostanie załadowana do edytora w momencie pierwszego pojawienia się go na stronie.
Language: Lista rozwijana pozwalająca wybrać język interfejsu edytora (np. Polski, Angielski).
Placeholder: Tekst, który będzie widoczny w pustym edytorze jako zachęta dla użytkownika.
#### 4. Akcje w Workflow
Plugin udostępnia dwie kluczowe akcje, które można wywołać w workflow:
Set Content
Cel: Ustawia lub nadpisuje aktualną zawartość edytora. Idealna do ładowania szablonów po wybraniu opcji z dropdowna lub kliknięciu przycisku.
Parametr: Content (HTML) - pole tekstowe, do którego należy przekazać nową treść w formacie HTML.
Clear Content
Cel: Całkowicie czyści zawartość edytora.
Parametr: Brak.
#### 5. Stany Wyjściowe (Exposed States)
Element "GloDitor" udostępnia następujące stany, których można używać w innych elementach Bubble lub w logice warunkowej:
current_content
Typ: text
Opis: Zwraca na żywo pełną zawartość edytora w formacie HTML. Użyj tego stanu, aby wyświetlić podgląd na żywo w elemencie HTML lub aby zapisać finalną treść do bazy danych.
is_empty
Typ: yes/no
Opis: Zwraca yes, jeśli edytor jest pusty, i no, jeśli zawiera jakąkolwiek treść. Przydatne do warunkowego włączania/wyłączania przycisków, np. "Zapisz".
####6. Używanie edytora wewnątrz popupa
Dla prawidłowego funkcjonowania edytora wewnątrz popupa, należy popupowi nadać atrybut id=popupForTiny.
Edytor ma atrybut is_fullscreen (yes/no), jeżeli przy uruchomieniu na popuie i wejściu w fullscreen są widoczne prześwitujące elementy z popupa, to należy uwarunkować ich wyświetlanie poprzez is_fullscreen=yes -> not visible
"GloDitor" Plugin Documentation (TinyMCE Editor)
1. General Description
The "GloDitor" plugin integrates the advanced TinyMCE WYSIWYG (What You See Is What You Get) text editor with Bubble.io applications. It enables creating and editing rich HTML content, perfect for building email templates, articles, blog posts, or any other content requiring formatting.
The plugin has been designed with flexibility and full content control in mind, including the ability to edit complete HTML documents (along with <html>, <head>, and <body> tags).
2. Key Features
Full Rich Text Editing: Support for standard formatting options such as bold, italic, lists, colors, font sizes, text alignment, etc.
Complete HTML Document Editing: Thanks to the built-in fullpage plugin, the editor properly handles pasting and editing complete HTML templates (e.g., from emails) without removing crucial structural tags.
Source Code Editing: Available "Source Code" button (</>) allows direct HTML code editing.
Configurable Interface: Ability to change interface language (default Polish) and font size units (default px).
Dynamic Content Management: Editor content can be set dynamically using workflow actions, allowing template loading from database.
Exposed States: Plugin continuously provides current editor content and information about whether it's empty, enabling live previews and conditional logic.
3. Element Configuration
After dragging the "GloDitor" element onto the page, the following configuration fields are available in the "Appearance" panel:
API Key: (Required) API key from your TinyMCE account. Essential for editor functionality.
Initial Content: (Optional) HTML content that will be loaded into the editor when it first appears on the page.
Language: Dropdown list allowing selection of editor interface language (e.g., Polish, English).
Placeholder: Text that will be visible in the empty editor as a prompt for the user.
4. Workflow Actions
The plugin provides two key actions that can be called in workflows:
Set Content
Purpose: Sets or overwrites current editor content. Ideal for loading templates after selecting an option from dropdown or clicking a button.
Parameter: Content (HTML) - text field where new HTML format content should be passed.
Clear Content
Purpose: Completely clears editor content.
Parameter: None.
5. Exposed States
The "GloDitor" element exposes the following states that can be used in other Bubble elements or conditional logic:
current_content
Type: text
Description: Returns live full editor content in HTML format. Use this state to display live preview in HTML element or to save final content to database.
is_empty
Type: yes/no
Description: Returns yes if editor is empty, and no if it contains any content. Useful for conditionally enabling/disabling buttons, e.g., "Save".
6. Using the Editor Inside Popup
For proper editor functionality inside a popup, the popup should be given the attribute id=popupForTiny.
The editor has an is_fullscreen attribute (yes/no). If when launching in popup and entering fullscreen there are visible overlapping elements from the popup, their display should be conditioned through is_fullscreen=yes -> not visible.
Built on Bubble
