Skip to content

Conversation

@Maxpnl
Copy link

@Maxpnl Maxpnl commented Sep 18, 2020

Hello, I managed to handle custom block tools, I updated the readme with an explanation of how I did it, it's not a really clean code, you have to serve a file named "custom-editorjs-tools.js" containing the custom tools and to get the class from the classname I use an eval, but if the classname doesn't depend on user input (and that will probably be the case), it should be safe to use.

I hope you'll merge this, or at least take inspiration from this PR as I think it could be helpfull to most people that are using this.

Thanks.

Added custom editor tools, this is supposed to be in the static files for the current project (whatever it is), it can contain any custom tool (I got this one from the editorjs wiki)
With this patch you can use something like

        editorjs_config={
            "tools": {
                "Custom": {
                    "Customimage": {
                        "class": "SimpleImage"
                    }
                }
            }
        }

And it will be evaluated (of course, the class name should be added by someone who is trusted, and should never depend on user input as it would lead to xss)
Explained how to use custom tools
@Maxpnl
Copy link
Author

Maxpnl commented Sep 18, 2020

Here's an example of custom-editorjs-tools.js

class SimpleImage {
  static get toolbox() {
    return {
      title: 'Customimage',
      icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>'
    };
  }

  render() {
    return document.createElement('input');
  }

  save(blockContent) {
    return {
      url: blockContent.value
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant