Editor.js integration

Anvil Q&A
1

Have you tried to integrate Editor.js with Anvil?

It would be very interesting to see how Editor.js could be integrated with Anvil.

1 Like
2

I thought the editor was really cool and I think it is used in a management tool I love to use (clickup).

So I want to use it in my tools!

A lot of wasted breath to say , here is a quick and dirty integration :slight_smile:

live example:

clone:

result:

image
image727Ă—602 14.9 KB

EDIT:

updated the link to have a get_state and set_state property to get the current state of the editor and set the state of the editor. :slight_smile:

p.s. I love anvil and how easy it makes things.

8 Likes
3

This is incredible! Yoink.

2 Likes
4

This is great. Thanks @anthonys

1 Like
5

It’s really good - I just wish I had a use for it!

1 Like
6

Can I ask a really, really dumb question…

If I write something super in this, using it as a component on a page, how do I save what was written to an anvil datatable??

7

Not a dumb question at all! (Preface with I’m on a mobile device so this might be ugly)

You can use get_state to request a json object from the editor that you can then save in a database. You can then pull that from your database and use the set_state to set your editor to that saved state.

8

Much obliged, I’m looking at about three different apps and it came to yours and my brain said “wants it, but gone Anvil blind”. Just needed a prompt!

9

In case there’s anyone else like me who doesn’t really do JS - and I am pretty (100%) sure this will be wrong, but it works and this forum is for drilling out bad habits!!

To get this to do the thing I wanted it to do, I had to (by trial and error):

  1. Edit the script to include an empty save function at the top:
function save() {
  // Do nothing
}
  1. in the Editor form_show, just leave it empty:
def form_show(self, **event_args):
    pass

  1. Use the Editor form as a Component.

  2. Add the component to a start form and add button_1 as a “save” button

  3. Add imports at the top of your start form:

from ..Editor import Editor
import time
  1. Add these two functions to the start form:
def form_show(self, **event_args):
    self.editorjs = Editor()
    time.sleep(1)
    self.editorjs.get_state()

  def button_1_click(self, **event_args):
    self.editorjs = Editor()
    state = self.editorjs.get_state()
    print(state)
  1. Run your app, observe the lack of error, and type “This is a test” then click “save” and enjoy your console (which means you have a simple object to save and return):

{'time': 1679771132835, 'blocks': [{'id': 'CQp6PJwVL5', 'type': 'paragraph', 'data': {'text': 'This is a test'}}], 'version': '2.26.5'}

OR:

Do none of these clearly wrong things and get the following error every time the app runs:

ExternalError: TypeError: editor.save is not a function

Beyond me, to be honest, but it’s doing the thing I want.

Totally open to being shown how to do this properly, and at least I won’t have to ask silly questions again!

10

I am not entirely sure how you are using the cloned link.

I think your are attempting to create your app in the cloned app, but the cloned app should be used as a dependency.

Then you can import the Editor from the EditorJS package and add it as a component:

from EditorJS.Editor import Editor

class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    # Any code you write here will run before the form opens.
    self.editor = Editor()
    self.add_component(self.editor)

Here is an example of how I would used the component link above. there is also an example of using get_state and set_state. You shouldn’t have to write any more JS unless you’re trying to update the component and add more capability.

1 Like
11

See, I knew there was a better way. Makes perfect sense.

1 Like