editorjs
Reactive icon

EditorJS

Stable version 2.1.0 (Compatible with OutSystems 11)
Uploaded
 on 13 October 2024
 by 
5.0
 (4 ratings)
editorjs

EditorJS

Documentation
2.1.0

Basic configuration

To achieve the basic functionality you just need to:

  1. Install the component 
  2. Add dependencies to the `EditorJS` block and the `Editor_Save` client action
  3. Drag the `EditorJS` block to your screen / block
  4. Create a handler for the `Initialized` event and set the EditorInstance to a local variable
  5. Add a button that calls the `Editor_Save` client action

Adding tools (plugins)

You can provide additional functionality by importing tools. You can find awesome plugins here.

  1. Find the tool you want
  2. From github, download the /dist file. Usually there is a link to the JsDelivr CDN where you can grab it
  3. Import the tool script to your module
  4. Set the script as required by your module / screen / block
  5. Where you have the `EditorJS` block, on the `Tools` input, set the `Name` and `Class` parameters. The `Class` must be the name of the JS class exported by the tool. If you're unsure, you can check the script or the github page for that tool.

Tips:

Create a block that wraps the `Editor_JS` block and requires all the scripts for the tools that you will need. This way you ensure everything is loaded on time and that you can reuse your config easily. See the code for an example.


2.0.0

Basic configuration

To achieve the basic functionality you just need to:

  1. Install the component 
  2. Add dependencies to the `EditorJS` block and the `Editor_Save` client action
  3. Drag the `EditorJS` block to your screen / block
  4. Create a handler for the `Initialized` event and set the EditorInstance to a local variable
  5. Add a button that calls the `Editor_Save` client action

Adding tools

You can provide additional functionality by importing tools (plugins). You can find awesome plugins here.

  1. Find the tool you want
  2. From github, download the /dist file. Usually there is a link to the JsDelivr CDN where you can grab it.
  3. Import the tool script to your module
  4. Set the script as required by your module / screen / block
  5. Where you have the `EditorJS` block, on the `Tools` input, set the `Name` and `Class` parameters. The `Class` must be the name of the JS class exported by the tool. If you're unsure, you can check the script or the github page for that tool.

Tips:

Create a block that wraps the `Editor_JS` block and requires all the scripts for the tools that you will need. This way you ensure everything is loaded on time and that you can reuse your config easily. See the code for an example.


1.3.0

Basic configuration

To achieve the basic functionality you just need to:

  1. Install the component 
  2. Add dependencies to the `EditorJS` block and the `Editor_Save` client action
  3. Go to the official releases and download the `editorjs.umd.js` file
  4. Add the `editorjs.umd.js` script to your module
  5. Set the script as required by your module / screen / block
  6. Drag the `EditorJS` block to your screen / block
  7. Create a handler for the `Initialized` event and set the EditorInstance to a local variable
  8. Add a button that calls the `Editor_Save` client action

Adding tools

You can provide additional functionality by importing tools (plugins). You can find awesome plugins here.

  1. Find the tool you want
  2. From github, download the /dist file. Usually there is a link to the JsDelivr CDN where you can grab it.
  3. Import the tool script to your module
  4. Set the script as required by your module / screen / block
  5. Where you have the `EditorJS` block, on the `Tools` input, set the `Name` and `Class` parameters. The `Class` must be the name of the JS class exported by the tool. If you're unsure, you can check the script or the github page for that tool.

Tips:

Create a block that wraps the `Editor_JS` block and requires all the scripts (editorjs + tools) that you will need. This way you ensure everything is loaded on time and that you can reuse your config easily. See the demo for an example.


1.2.0

Basic configuration

To achieve the basic functionality you just need to:

  1. Install the component 
  2. Add dependencies to the `EditorJS` block and the `Editor_Save` client action
  3. Go to the official releases and download the `editorjs.umd.js` file
  4. Add the `editorjs.umd.js` script to your module
  5. Set the script as required by your module / screen / block
  6. Drag the `EditorJS` block to your screen / block
  7. Create a handler for the `Initialized` event and set the EditorInstance to a local variable
  8. Add a button that calls the `Editor_Save` client action

Adding tools

You can provide additional functionality by importing tools (plugins). You can find awesome plugins here.

  1. Find the tool you want
  2. From github, download the /dist file. Usually there is a link to the JsDelivr CDN where you can grab it.
  3. Import the tool script to your module
  4. Set the script as required by your module / screen / block
  5. Where you have the `EditorJS` block, on the `Tools` input, set the `Name` and `Class` parameters. The `Class` must be the name of the JS class exported by the tool. If you're unsure, you can check the script or the github page for that tool.

Tips:

Create a block that wraps the `Editor_JS` block and requires all the scripts (editorjs + tools) that you will need. This way you ensure everything is loaded on time and that you can reuse your config easily. See the demo for an example.


1.1.0

Basic configuration

To achieve the basic functionality you just need to:

  1. Install the component 
  2. Add dependencies to the `EditorJS` block and the `Editor_Save` client action
  3. Go to the official releases and download the `editorjs.umd.js` file
  4. Add the `editorjs.umd.js` script to your module
  5. Set the script as required by your module / screen / block
  6. Drag the `EditorJS` block to your screen / block
  7. Create a handler for the `Initialized` event and set the EditorInstance to a local variable
  8. Add a button that calls the `Editor_Save` client action

Adding tools

You can provide additional functionality by importing tools (plugins). You can find awesome plugins here.

  1. Find the tool you want
  2. From github, download the /dist file. Usually there is a link to the JsDelivr CDN where you can grab it.
  3. Import the tool script to your module
  4. Set the script as required by your module / screen / block
  5. Where you have the `EditorJS` block, on the `Tools` input, set the `Name` and `Class` parameters. The `Class` must be the name of the JS class exported by the tool. If you're unsure, you can check the script or the github page for that tool.

Tips:

Create a block that wraps the `Editor_JS` block and requires all the scripts (editorjs + tools) that you will need. This way you ensure everything is loaded on time and that you can reuse your config easily. See the demo for an example.


1.0.0

Basic configuration

To achieve the basic functionality you just need to:

  1. Install the component 
  2. Add dependencies to the `EditorJS` block and the `Editor_Save` client action
  3. Go to the official releases and download the `editorjs.umd.js` file
  4. Add the `editorjs.umd.js` script to your module
  5. Set the script as required by your module / screen / block
  6. Drag the `EditorJS` block to your screen / block
  7. Create a handler for the `Initialized` event and set the EditorInstance to a local variable
  8. Add a button that calls the `Editor_Save` client action

Adding tools:

You can provide additional functionality by importing tools (plugins). You can find awesome plugins here.

  1. Find the tool you want
  2. From github, download the /dist file. Usually there is a link to the JsDelivr CDN where you can grab it.
  3. Import the tool script to your module
  4. Set the script as required by your module / screen / block
  5. Where you have the `EditorJS` block, on the `Tools` input, set the `Name` and `Class` parameters. The `Class` must be the name of the JS class exported by the tool. If you're unsure, you can check the script or the github page for that tool.

Tips:

Create a block that wraps the `Editor_JS` block and requires all the scripts (editorjs + tools) that you will need. This way you ensure everything is loaded on time and that you can reuse your config easily. See the demo for an example.