🚀[NEW PLUGIN] Advanced WYSIWYG text editor

[MindForApps]

Hello fellow Bubblers!
We have recently published a new plugin and would like to share this news with you:

Advanced WYSIWYG HTML editor - the plugin is based on the SunEditor (WYSIWYG web editor).
The Advanced WYSIWYG HTML editor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.

Key features:

• Configurable toolbar with option to add/remove controls. 37+ toolbar buttons. The ability to model the toolbar (buttons) as you need.
• Option to change the order of the controls in the toolbar.
• Option to conditionally show hide toolbar.
• Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
• Support for block types: Paragraph, H1 - H6, Blockquote, Code.
• Support for setting font-size and font-family and option to add custom types.
• Support for ordered / unordered lists and indenting.
• Support for text-alignment.
• Support for coloring text or background and option to add your own color values.
• Support for adding / editing links
• Support for adding / uploading images.
• Support for aligning images, setting height, width.
• Support for Embedded links, flexibility to set height and width.
• Option of undo and redo.
• Configurable behavior for RTL and Spellcheck.
• Support for placeholder.
• Support for internationalization. 19 interface languages: ckb, da, de, en, es, fr, he, it, ja, ko,l v, nl, pl, pt_br, ro, ru, se, ua, zh_cn.
• Light and dark themes.
• 4 mode of the editor (‘classic’, ‘inline’, ‘balloon’, ‘balloon-always’).
• Pasting from Microsoft Word and Excel.
• Custom table selection, merge and split.
• Media embed, images upload (Possibility to insert images, video and audio.).
• Can use KaTeX (math plugin).
• A large number of element actions (run in workflows): Set, Get, Show Editor, Hide Editor, Disable Editor, Enable Editor, Append contents to Editor, getText, Show Toolbar, Hide Toolbar, Disable Toolbar, Enable Toolbar, readOnly
• Browser Support:
  Chrome, Firefox, Opera, Safari, Edge, Internet Explorer -11+
• And… many other features

Installation:

1. Install the plugin. Place the “WYSIWYG editor” from elements to wherever part you need.
2. That’s it. You can refer to the content as that “WYSIWYG editor” editor’s content.

Demo:
For detailed connection and demo information, visit the plugin demo page at

Bubble - Visual Programming

There you can go to the editor (OPEN EDITOR).

Plugin page:

Advanced WYSIWYG HTML editor Plugin for Bubble, by Mind For Apps

Need help adjusting your new application? Our Plugin and Template customers receive a 20% discount for all our Design and Development work.
Contact Jay at [email protected]

Support:
If you have questions, reach out to us at [email protected]

We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

.

.

[app2adev]

Please, could this plugin already receive pre-defined data, and also dynamic data, pulling from a repeating group, to then generate a pdf?

Thanks

[MindForApps]

@app2adev

Please, could this plugin already receive pre-defined data, and also dynamic data, pulling from a repeating group, to then generate a pdf?

You can use the “Initial Content” parameter to pass initial predefined data to the editor. You can see it on the main demo page.

You can dynamically set content through a workflow using the “set” action. “set” - completely replaces the content. But in the next update, an additional “appendContents” action will be added - allowing you to add new data to the end of existing ones.

[Future]

Whoa… Just discovered this editor, quite amazing… And, your implementation… it’s amazing! Can’t believe how customizable it is and your documentation is perfect.

One question : I see the states “editor content” and “editor text content”, is there a way they get updated automatically? (on demo page, they stay empty)

[MindForApps]

@Future

One question : I see the states “editor content” and “editor text content”, is there a way they get updated automatically?

Hello!

The “editor content” and “editor text content” states are designed to get actual data (content). “editor text content” returns only text, while “editor content” returns HTML with all tags and styles.
Content is written to these states after clicking the “Save” button on the toolbar.

In the next update, the “Save” action will be added to write data through the workflow, as well as the “onChange” trigger will be added, which will fire on any content change.
You can save content even after each added letter, or save every few seconds.

Or did you mean something else?

[Future]

Nope, exactly it. Was just wondering if there was any special action to perform to update the states cause they weren’t updating automatically on the demo page Thanks!

[Future]

Other questions while i’m at it lol…

• Does it work great in repeating groups?
• I’ve checked the docs a little and I found “imageUploadUrl” and “imageUploadHeader”, do you think you could make those as variables (to allow someone to upload a picture to an external API/hosting service/etc)? (I see a great use case to send a request to a backend workflow to upload the file to Wasabi, AWS, etc…)
• What’s the css file someone has to attach to use this editor to build emails and keep the styling?

[MindForApps]

@Future

Nope, exactly it. Was just wondering if there was any special action to perform to update the states cause they weren’t updating automatically on the demo page

There are no demos for these states on the demo page.
Now they are updated after clicking the “Save” button on the toolbar.
When we add (I think in a day or two) a “Save” action to the workflow and an “onChange” trigger, you will be able to update states through the workflow. You yourself will be able to determine how to update either after any changes in the content or after a certain time.

[MindForApps]

@Future

Does it work great in repeating groups?

Yes, the plugin element is inserted into a repeating group and works normally.

@Future

I’ve checked the docs a little and I found “imageUploadUrl” and “imageUploadHeader”, do you think you could make those as variables (to allow someone to upload a picture to an external API/hosting service/etc)? (I see a great use case to send a request to a backend workflow to upload the file to Wasabi, AWS, etc…)

These functions are not yet implemented in our plugin. Perhaps in the future we will add this feature.

@Future

What’s the css file someone has to attach to use this editor to build emails and keep the styling?

Here I think it is better to use templates. You can read about templates on the demo page.

[MindForApps]

@MindForApps

Now they are updated after clicking the “Save” button on the toolbar.
When we add (I think in a day or two) a “Save” action to the workflow and an “onChange” trigger, you will be able to update states through the workflow. You yourself will be able to determine how to update either after any changes in the content or after a certain time.

Hello!

Update v1.0.1

Changes:

• Added action to workflow - “Save”. Now you can save content not only by pressing the “Save” button on the toolbar, but also through the workflow.
• Added “content_changed” trigger that fires on any content change.
• Added the ability to hide the toolbar (hideToolbar).
• fixed minor bugs in dark theme colors.
• plus other minor improvements

[app2adev]

Provide examples for us to understand how it works and how to put it in our projects

Grateful

[MindForApps]

The “Save” action writes content to states (“editor text content” only writes text, while “editor content” writes formatted HTML along with tags and styles).
Those. by running “Save” (either by clicking the button on the toolbar or through the workflow) we will get the content from the editor for further use.

@Future

I see the states “editor content” and “editor text content”, is there a way they get updated automatically?

We’ve added a “Save” workflow action. This allows you to automate the process of updating these states (“content editor” and “text content editor”)

@app2adev

Provide examples for us to understand how it works and how to put it in our projects

The simplest example is to use this to prevent the loss of data (content) that the user enters into the editor. Content can be saved at specific intervals or immediately after any content change.
Those. in the workflow, you can call the “Save” action, for example, every 10 seconds and after that save the data (write data from “editor content” or “editor text content” to the database). Or you can use the “content_changed” trigger and call the “Save” action after it fires. Here you can choose the method that suits you best.

[Guru]

Hi @MindForApps,

Feels like a tool I’m about to use but I need to clarify some points:

1. Can you disable copy / pasting images into the editor ?
2. How pasted images behave in the reponsive ?
3. Can you make those images private?

Thank you !

[app2adev]

What I would like to see is how to feed the editor with dynamic data, once the “template” has been opened.

[MindForApps]

Sorry, perhaps I do not quite understand your question, but data can only be inserted into the editor in one whole block. It will not work to add dynamic data inside this data block.
It is possible to replace the entire data block (“Set” action) or add some additional data to the end of an existing data block (“Append contents to Editor” action)

[MindForApps]

@Guru

Can you disable copy / pasting images into the editor ?

Officially, the library that is used to create the plugin does not provide such an opportunity. But I think that we can find a workaround thanks to which it will be possible to disable or allow the ability to paste images through copy paste (from the clipboard).

@Guru

How pasted images behave in the reponsive ?

Well, everything seems to be in order (I guess). When responsive, the height of the image changes depending on the width. Those. proportions are maintained. You can check it out on the demo page. You can insert your images in the demo editors and see how the images behave in the adaptive.

@Guru

Can you make those images private?

Right now, images can be inserted in two ways:

1. insert a link to an image already saved somewhere
2. upload an image that will be encoded in Base64 and inserted into the content in this form.
   But we’re working on giving users the ability to upload images to the app’s database. And so that a link to the uploaded image (and not Base64) is automatically inserted into the content of the editor. I think that we will also be able to make the ability to make these images private (attachTo: optional parameter to attach the file to. It has to be a thing in Bubble). But at the moment I am not ready to talk about the exact timing of the completion of this work.

[MindForApps]

@app2adev

What I would like to see is how to feed the editor with dynamic data, once the “template” has been opened.

@MindForApps

It is possible to replace the entire data block (“Set” action) or add some additional data to the end of an existing data block (“Append contents to Editor” action)

I would like to expand on my previous answer:

As I wrote, it will not be possible to dynamically insert data into separate places of content in the editor. But you can make something like a content template and dynamically insert data into it. Then, if necessary, run the “Set” action, which will replace the existing content with a new one with changed data.

Here is a simple example of a content template with dynamic data connected:

[Future]

Little bug with the state “editor text content” : It does not convert breakline to spaces…

This :
Hey
How’s
it going.

Will result in :
HeyHow’sit going.

[Future]

Do you have any way to set the borders? (roundness, color, on hover, on focus, etc) Thanks!

[MindForApps]

Hello!

@Future

Little bug with the state “editor text content” : It does not convert breakline to spaces…

Yes you are right. Now I see it too.

After not much testing, it became clear that this is not a big bug in the library that we use to create the plugin.
I wrote to the author of the library and am now waiting for a response from him.
.
.

@Future

Do you have any way to set the borders? (roundness, color, on hover, on focus, etc) Thanks!

.
Do you mean the borders around the edit area? Something like that?

If yes, then we will add this feature. But it seems to me that it makes no sense to enable this function on hover. I think that we will make it work when receiving focus. Let’s add the ability to choose the color, thickness and radius of the border.