By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Using multiple editors

When using multiple editors in your application, prefer a "superbuild" with all the plugins you need instead of multiple specific builds that only add the required plugins for that instance. This way you will:

• Have a smaller size overall
• Avoid duplicated modules errors

Please refer to the demo for a working example.

At the moment you have examples on how to build a:

• CKEditor 4 "clone" - similar features to a forge component you might be migrating from
• Advanced CK - with advanced features like Mentions
• Feature Rich CK - an editor with pretty much all baked in
• Notion CK - a CK build that looks like Notion
• Micro Editor CK - minimalist inline editor designed for simplicity, offering basic features for quick and easy text editing

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Using multiple editors

When using multiple editors in your application, prefer a "superbuild" with all the plugins you need instead of multiple specific builds that only add the required plugins for that instance. This way you will:

• Have a smaller size overall
• Avoid duplicated modules errors

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)

By design, this asset is not batteries included. By investing some more time (15-30 minutes) in the initial setup, you will get a totally customized editor, tailored to your needs.

Installation and references

1. Install the component in the target environment.
2. Add references to the `CKEditor` block.
3. Drag the `CKEditor` block to your screen / block.
4. Create a handler for the `Initialized` event and set the `Instance` to a local variable.
5. Call the `CKEditor_Data_Get` client action to get the editor data.
6. (Optional) Customize the width and height of the editor by targeting the `.ck-editor__editable` class.

Building your custom editor

1. Go to https://ckeditor.com/ckeditor-5/builder.
2. Follow the wizzard, choosing the features you will need. Some features are not free.
3. On the 4th (installation) step choose VanillaJS, Self-hosted (zip), Download Project.
4. Download the sample project.
5. Extract the project.
6. Open the project (ckeditor5-builder-xx.x.x-selfhost) and go to the ckeditor folder.
7. Import the file ckeditor5.umd.js into OutSystems (be sure to import the .umd one).
8. Add the CSS in ckeditor5.css to your theme / block / screen.
9. Add the ckeditor5.umd.js to the `Required Scripts` of your block / screen.

Please refer to the demo for a working example.

If you have any doubts or think any aspect of the asset and or documentation could be improved don't hesitate on sending me a message :)