Services Plugins FAQs

⨁ Modular Text & Docs Editor - New Plugin From Zeroqode

editorjs

This plugin is a next generation block styled editor. Its workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc.
Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, the plugin outputs JSON object with data of each Block.

editorjs
Key features:

  • block-styled editor
  • clean data output in JSON
  • easy to use

Live demo: https://zeroqode-demo-17.bubbleapps.io/editor_js
Plugin page: Modular Text & Docs Editor Plugin | Bubble

Please support us with a retweet

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120

Bubble Templates

Zeroqode Blocks

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-code Development Services

Looks interesting Levon. Is it possible to customize the Headers (H1,H2,H3) that are provided to blocks through CSS or Bubble styles?

Perhaps it’d be possible through CSS, but you’d need to experiment with it

Levon, just bought this, very cool. Can you explain how to save content to the database? I am not able to save anything, not through action or auto-save. Thanks!
René

Hi Rene,
thanks, can you show screenshots of your current workflows where you try to save data? We’ll try to help you out
thanks!

Here you go, meanwhile there is no documentation as far as I could see on how to save the content? Please point me to any such documents if available.

@levon I had a look through the documentation again although can’t seem to find any instructions of how to actually store the data. I did see in tour demo you load through search which works for me as well when copying in the json from your demo.

Thanks for helping out. This will be very useful for a new version of Teeming.

Hello @rene, I hope you are doing well so for saving data to the database you have to enable autosave checkbox in Editor properties than you have to set up your event for saving, it may be button click for example. So I create two buttons to demonstrate to you how to save data from EditorJs with the creation of new items and updating the old one. Firstly - the creation action workflow you can find here, the second action workflow you can find here.

I hope it helps you.
Thank you.
BR.

1 Like

@levon, I’m running into an issue when refreshing the editor to set new content. In my application, there are templates users can select, and then when they select the template it adds the body of the template to the modular text & docs editor.

[Edit] It also appears the initial content section isn’t working in the editor. You can’t edit the editor when setting initial convenient.

Any idea what’s happening?

Thanks,
Cole

Hello, @cole, and thanks for reaching out.

You need to have your database data (templates that users can select) formatted as a JSON code. The Modular Text & Docs Editor plugin works only with the JSON. So, if you want to use the data from your database or input field (like on your second screenshot), you need to have it formatted differently.

The example of this you can see on our demo page (editor):

  1. to display the data from the database, within the plugin element, you refer to the database table - Screenshot by Lightshot
  2. the content of this table is in a JSON format - Screenshot by Lightshot

The Initial Content field is working, but you need to set it rightly - the data, you are corresponding to within the Initial Content field, should be in a JSON format also (just like it is shown on our demo page/editor).
https://www.loom.com/share/204f2e6af119433c8a82476db59491a6


To make your plugin work correctly within your app, you need to change the content format of your database table to JSON. Would you kindly check out our plugin editor/demo page and make sure it is working properly under the correct setup?


Also, I can suggest you take a look at our ZQ Rich Text Editor 2.0 plugin. For this plugin, the data does not need to be in JSON format - it can work with plain text too, and it has pretty much the same functionalities:

Please check out its demo page/editor and documentation first, to make sure it can be useful for you.

Please let me know if I can help you somehow more :pray:
Regards, Kate

1 Like

Hello everyone,

Is there a plan to transition this plugin to the new responsive engine of bubble?

Thank you.

Hello @sewar37895,
Please accept our apologies for the late reply. :pray:t2:

I’m afraid, we’ve not discussed this. But, I have passed it to the developer team for consideration. Once any news will become available, I will let you know.

Best,
Gulce

1 Like

Hello @sewar37895,
Thank you for your patience. :pray:t2:

We’ve updated the plugin and adapted it to the new responsive engine. Kindly ask you to upgrade your plugin to the latest version (1.11.0.) and give it a try.

Have a great day!

Regards,
Gulce

Hello, friends.

We have adapted our plugin to smaller screen sizes. Now it looks and functions way much prettier on phones (Version 1.12.0). :iphone:

Feel free to check out the plugin demo page to see the difference:
https://zeroqode-demo-17.bubbleapps.io/editor_js_responsive

Cheers! :slightly_smiling_face:

Is there a way to make the editor wider? It seems to ignore the width set to 100%.

Hi @liz,
Thanks for reaching out!

Indeed, the plugin element does have a limit of 650px. Even if we try to set it to 100% width, the content inside will still be displayed as 650px. I’ve passed this to our developers, as soon as I have any news I’ll get back to you. :pray:

Best regards,
Gulce

Hello @liz,
Thank you for your patience.

We’ve updated the plugin and fixed the issue. Please upgrade your plugin to the latest version (1.19.0) and give it a try. :slightly_smiling_face:

If I can help you with anything else, let me know.

Best regards,
Gulce

This is pretty great, thank you for the fix and the quick response!

1 Like