{"id":21430178,"url":"https://github.com/cuba-platform/grapesjs-addon","last_synced_at":"2025-10-05T13:43:11.525Z","repository":{"id":150932217,"uuid":"161181933","full_name":"cuba-platform/grapesjs-addon","owner":"cuba-platform","description":"GrapesJs HTML editor add-on for CUBA application. Built on GrapeJs javascript library with webpage preset.","archived":false,"fork":false,"pushed_at":"2024-12-26T07:59:01.000Z","size":8572,"stargazers_count":8,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-14T12:47:16.919Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuba-platform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-10T13:48:13.000Z","updated_at":"2024-09-18T15:44:58.000Z","dependencies_parsed_at":"2024-03-25T12:58:46.153Z","dependency_job_id":"3eaf8d27-d38a-46ab-82e7-a93040c98dd4","html_url":"https://github.com/cuba-platform/grapesjs-addon","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/cuba-platform/grapesjs-addon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuba-platform%2Fgrapesjs-addon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuba-platform%2Fgrapesjs-addon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuba-platform%2Fgrapesjs-addon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuba-platform%2Fgrapesjs-addon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuba-platform","download_url":"https://codeload.github.com/cuba-platform/grapesjs-addon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuba-platform%2Fgrapesjs-addon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278464315,"owners_count":25991177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T22:21:16.983Z","updated_at":"2025-10-05T13:43:11.505Z","avatar_url":"https://github.com/cuba-platform.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n    \u003ca href=\"http://www.apache.org/licenses/LICENSE-2.0\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg?style=flat\" alt=\"license\" title=\"\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://travis-ci.org/cuba-platform/grapesjs-addon\"\u003e\u003cimg src=\"https://travis-ci.org/cuba-platform/grapesjs-addon.svg?branch=master\" alt=\"Build Status\" title=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# GrapesJS HTML Editor\n\n- [Overview](#overview)\n- [Installation](#installation)\n  - [From the Marketplace](#from-the-marketplace)\n  - [By Coordinates](#by-coordinates)\n- [Usage](#usage)\n  - [Adding HTML Editor to the Screen](#adding-html-editor-to-the-screen)\n  - [UI Components](#ui-components)\n  - [Commands](#commands)\n  - [Custom Blocks](#custom-blocks)\n  - [User Interface of HTML editor](#user-interface-of-html-editor)\n    - [The Blocks Tab](#blocks)\n    - [The Style Manager Tab](#the-style-manager-tab)\n    - [The Trait Manager Tab](#trait)\n    - [The Layers Tab](#layers)\n    - [The Top Panel Buttons](#buttons)\n\n\n# Overview \u003ca name=\"overview\"\u003e\u003c/a\u003e\n\nThe add-on provides a visual HTML editor based on a [GrapesJs](https://grapesjs.com/) JavaScript library with the extensive set of HTML elements. It allows building HTML templates without any knowledge of coding. All you need is to drag an element into the canvas. The wide range of options enables independent styling of any element inside the canvas.\n\nKey features:\n- Wide variety of built-in HTML elements.\n- Viewing representation for different devices.\n- Using CSS properties.\n- Downloading/uploading HTML code.\n\n![html-editor](img/editor.gif)\n\nSee [sample application](https://github.com/cuba-platform/grapesjs-addon-demo) using this component.\n\n# Installation \u003ca name=\"installation\"\u003e\u003c/a\u003e\n\nThe add-on can be added to your project in one of the ways described below. Installation from the Marketplace is the simplest way. The last version of the add-on compatible with the used version of the platform will be installed.\nAlso, you can install the add-on by coordinates choosing the required version of the add-on from the table.\n\nIn case you want to install the add-on by manual editing or by building from sources see the complete add-ons installation guide in [CUBA Platform documentation](https://doc.cuba-platform.com/manual-latest/manual.html#app_components_usage).\n\nThen, if necessary you can extend an application theme: find *Themes* in the CUBA project tree, right click and go *Manage Themes -\u003e Create Theme Extension*.\n\n## From the Marketplace \u003ca name=\"from-the-marketplace\"\u003e\u003c/a\u003e\n\n1. Open your application in CUBA Studio. Check the latest version of CUBA Studio on the [CUBA Platform site](https://www.cuba-platform.com/download/previous-studio/).\n2. Go to *CUBA -\u003e Marketplace* in the main menu.\n\n ![marketplace](img/marketplace.png)\n\n3. Find the GrapesJS add-on there.\n\n ![addons](img/addons.png)\n\n4. Click *Install* and apply the changes.\nThe add-on corresponding to the used platform version will be installed.\n\n## By coordinates \u003ca name=\"by-coordinates\"\u003e\u003c/a\u003e\n\n1. Open your application in CUBA Studio. Check the latest version of CUBA Studio on the [CUBA Platform site](https://www.cuba-platform.com/download/previous-studio/).\n2. Go to *CUBA -\u003e Marketplace* in the main menu.\n3. Click the icon in the upper-right corner.\n\n ![by-coordinates](img/by-coordinates.png)\n\n4. Paste the add-on coordinates in the corresponding field as follows:\n\n `com.haulmont.addon.grapesjs:grapesjs-global:\u003cadd-on version\u003e`\n\n where `\u003cadd-on version\u003e` is compatible with the used version of the CUBA platform.\n\n| Platform Version | Add-on Version |\n|------------------|----------------|\n| 7.2.x            | 0.6.0          |\n| 7.2.x            | 0.5.3          |\n| 7.1.x            | 0.4.0          |\n| 7.0.x            | 0.2.0          |\n| 6.10.x           | 0.1.8          |\n\n5. Click *Install* and apply the changes. The add-on will be installed to your project.\n\n\n# Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nTo use the component you need to add HTML editor to the screen. Then add UI components.\n\n## Adding HTML Editor to the Screen \u003ca name=\"adding-html-editor-to-the-screen\"\u003e\u003c/a\u003e\n\nTo use the `GrapesJS` component in your screen, you need to add the special scheme `http://schemas.haulmont.com/grapesjs/ui-component.xsd` in the XML descriptor of the screen and then add a namespace like `grapesjs` for the schema. The schema contains information about the `grapesJsHtmlEditor` tag.\n\nLook at the example of usage:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?\u003e\n\u003cwindow xmlns=\"http://schemas.haulmont.com/cuba/window.xsd\"\n        class=\"com.haulmont.example.web.SomeController\"\n        xmlns:et=\"http://schemas.haulmont.com/grapesjs/ui-component.xsd\"\u003e\n    ...\n        \u003cet:grapesJsHtmlEditor id=\"htmlEditor\"\u003e\n            \u003cet:disabledBlocks\u003e\n                 //comma separated panel names which should be disabled, for example \"map,tabs\"\n            \u003c/et:disabledBlocks\u003e\n        \u003c/et:grapesJsHtmlEditor\u003e\n    ...\n```\n\n`grapesjs` UI component provides `setValue(String value)` and `getValue()` methods to set and get HTML content for the component.\n\n## UI Components \u003ca name=\"ui-components\"\u003e\u003c/a\u003e\n\nAfter adding HTML editor to the screen you need to add one of the following UI components:\n\n- `grapesJsHtmlEditor` - a base HTML editor without any applied plugins.\n- `grapesJsWebpageHtmlEditor` - an HTML editor suitable for webpage development with applied `webpage, customcode` plugins.\n- `grapesJsNewsletterHtmlEditor` - an HTML editor suitable for newletter development with applied `newsletter, customcode` plugins.\n\n`grapesJsNewsletterHtmlEditor` component has an additional `inlineCss`. If enabled then CSS classes will be inlined in HTML.\n\nUI components can be extended with plugins using `plugin` tag.\nA plugin can be selected from the list of predefined plugins or can be configured as a new plugin.\n\nDefault available plugins:\n- `basicBlocks` - this plugin contains some basic blocks for the GrapesJS editor ([documentation](https://github.com/artf/grapesjs-blocks-basic)).\n- `ckeditor` - this plugin replaces the default Rich Text Editor with the one from CKEditor ([documentation](https://github.com/artf/grapesjs-plugin-ckeditor)).\n- `customcode` - this plugin adds a possibility to embed custom code ([documentation](https://github.com/artf/grapesjs-custom-code)).\n- `flexBlocks` - this plugin adds the Flexbox block which allows creating easily flexible and responsive columns ([documentation](https://github.com/artf/grapesjs-blocks-flexbox))\n- `forms` - this plugin adds some basic form components and blocks to make working with forms easier ([documentation](https://github.com/artf/grapesjs-plugin-forms)).\n- `newsletter` - this preset configures GrapesJS to be used as a Newsletter Builder with some unique features and blocks composed specifically for being rendered correctly inside all major email clients ([documentation](https://github.com/artf/grapesjs-preset-newsletter)).\n- `postcss` - this plugin enables custom CSS parser via PostCSS ([documentation](https://github.com/artf/grapesjs-parser-postcss)).\n- `styleFilter` - add filter type input to the Style Manager in GrapesJS ([documentation](https://github.com/artf/grapesjs-style-filter)).\n- `tabs` - simple tabs component plugin for GrapesJS ([documentation](https://github.com/artf/grapesjs-tabs)).\n- `tooltip` - simple, CSS only, tooltip component for GrapesJS ([documentation](https://github.com/artf/grapesjs-tooltip)).\n- `touch` - this plugin enables touch support for the GrapesJS editor ([documentation](https://github.com/artf/grapesjs-touch))\n- `tuiImageEditor` - add the [TOAST UI Image Editor](https://ui.toast.com/tui-image-editor/) on Image Components in GrapesJS ([documentation](https://github.com/artf/grapesjs-tui-image-editor)).\n- `webpage` - this preset configures GrapesJS to be used as a Webpage Builder ([plugin documentation](https://github.com/artf/grapesjs-preset-webpage)).\n\nCustom project plugins can be registered via `com.haulmont.addon.grapesjs.web.gui.components.GjsPluginsRepository` class.\n\nExample:\n```xml\n\u003cet:grapesJsNewsletterHtmlEditor\n       id=\"templateEditor\"\n       inlineCss=\"true\"\n       height=\"100%\" width=\"100%\"\u003e\n   \u003cet:disabledBlocks\u003e\n       map,tabs\n    \u003c/et:disabledBlocks\u003e\n   \u003cet:plugin name=\"ckeditor\"\u003e\n       \u003c!-- path to plugin configuration--\u003e\n       \u003cet:optionsPath\u003e/com/haulmont/addon/grapesjs/web/gui/plugins/gjs-plugin-ckeditor.js\u003c/et:optionsPath\u003e\n   \u003c/et:plugin\u003e\n   \u003cet:plugin name=\"forms\"/\u003e\n   \u003cet:plugin name=\"flexBlocks\"/\u003e\n   \u003cet:plugin name=\"tuiImageEditor\"/\u003e\n   \u003cet:plugin name=\"customcode\"/\u003e\n   \u003cet:plugin name=\"postcss\"/\u003e\n   \u003cet:plugin name=\"touch\"\u003e\n       \u003cet:options\u003e\n           \u003c![CDATA[\n               ... custom plugin settings ...\n           ]]\u003e\n       \u003c/et:options\u003e\n   \u003c/et:plugin\u003e\n   \u003cet:plugin name=\"styleFilter\"/\u003e\n   \u003cet:plugin\u003e\n       \u003cet:name\u003ecustomPlugin\u003c/et:name\u003e\n       \u003cet:options\u003e\n           \u003c![CDATA[\n               ... custom plugin settings ...\n           ]]\u003e\n       \u003c/et:options\u003e\n   \u003c/et:plugin\u003e\n\u003c/et:grapesJsNewsletterHtmlEditor\u003e\n```\n\n## Commands \u003ca name=\"commands\"\u003e\u003c/a\u003e\n`GrapesJsHtmlEditor` component provides two methods to run and stop commands\n\n- `runCommand(String command)` - run command\n- `stopCommand(String command)` - stop command\n\n## Custom Blocks \u003ca name=\"custom-blocks\"\u003e\u003c/a\u003e\n\nCustom blocks can be added to the component using `block` tag with the following parameters:\n- *name* - a unique block id.\n- *label* - a name of the block.\n- *category* - group the block inside a category.\n- *content* - HTML content.\n- *contentPath* - path to HTML content\n- *attributes* - block attributes.\n\nBlock example:\n```xml\n\u003cet:block\u003e\n \u003cet:name\u003eh1-block\u003c/et:name\u003e\n \u003cet:label\u003eHeading\u003c/et:label\u003e\n \u003cet:category\u003eBasic\u003c/et:category\u003e\n \u003cet:content\u003e\n   \u003c![CDATA[\n           \u003ch1\u003ePut your title here\u003c/h1\u003e\n       ]]\u003e\n \u003c/et:content\u003e\n \u003cet:attributes\u003e\n   \u003c![CDATA[\n           {\n              title: 'Insert h1 block',\n              class:'fa fa-th'\n           }\n       ]]\u003e\n \u003c/et:attributes\u003e\n\u003c/et:block\u003e\n```\n\nCustom project blocks can be registered via `com.haulmont.addon.grapesjs.web.gui.components.GjsBlocksRepository` class.\nRegistered blocks can be added to UI component by `name` attribute. Example `\u003cet:block name=\"custom block name\"/\u003e`.\n\nPlease use `class:'fa \u003cfa-icon\u003e'` in block attributes to use Font Awesome icon.\n\n## User Interface of HTML editor \u003ca name=\"user-interface-of-html-editor\"\u003e\u003c/a\u003e\n\nYou can add, set and delete elements from the canvas. In addition, you can import and export HTML and CSS code. Here is a description of setting panels of the editor.\n\n### The Blocks Tab \u003ca name=\"blocks\"\u003e\u003c/a\u003e\n\nAfter opening the editor in your project you can see the *Blocks* tab. Set of elements depends on added [UI components](#ui-components). The  following elements can be enabled for adding:\n\n- in the *Basic* section: Columns, Text, Image, Video, Map, Link block, Text section;\n- in the *Extra* section: Navbar, Tabs, Custom code;\n- in the *Forms* section: Form, Input, Text area, Select, Button, Label, Checkbox, Radio.\n\n![editor-block-manager](img/editor-block-manager.png)\n\n### The Style Manager Tab \u003ca name=\"the-style-manager-tab\"\u003e\u003c/a\u003e\n\nYou can set the properties of the elements. Select the element and go to the *Style Manager* tab.\n\n![editor-style-manager](img/editor-style-manager.png)\n\n### The Trait Manager Tab \u003ca name=\"trait\"\u003e\u003c/a\u003e\n\nYou can define parameters of an element. Select the element and go to the *Trait Manager* tab.\n\n![editor-trait-manager](img/editor-trait-manager.png)\n\n### The Layers Tab \u003ca name=\"layers\"\u003e\u003c/a\u003e\n\nTo watch the list of elements on the canvas go to the *Layers* tab. You can hide elements on the canvas while editing.\n\n![editor-layers](img/editor-layers.png)\n\n ### The Top Panel Buttons \u003ca name=\"buttons\"\u003e\u003c/a\u003e\n\n The following buttons on the *Top Panel* are available:\n- the *Show borders* button\n- the *Preview* button\n- the *Full-screen* button\n- the *Export* button\n- the *Undo* button\n- the *Redo* button\n- the *Import* button\n- the *Clear canvas* button\n\nand buttons for changing the screen width.\n\n![editor-top-panel-buttons](img/editor-top-panel-buttons.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuba-platform%2Fgrapesjs-addon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuba-platform%2Fgrapesjs-addon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuba-platform%2Fgrapesjs-addon/lists"}