We need to integrate GrapesJs into our CRM-type app.
In simple words, we need a way to edit an HTML snippet in a textarea using the GrapesJs visual editor. Details are below.
GrapesJs is here: [login to view URL]
There is a Pages Editor, see the screenshot.
It is a popup dialog made with "[login to view URL]" library. It can contain a variable number of field sets of `code`, `type`, `authorities` and `layout` fields. These sets are added or removed with "+" and "x" buttons that you see in the picture.
The `type` dropdown may contain different entries like `json`, `xml` and also `html`. The layout field is a simple textarea.
We need a way to edit HTML in the `layout` textarea with GrapesJs visual editor. I see it as an "Edit" button that will be grayed out (disabled) unless the `type` is `html`. When pressed, an editor (GrapesJs) should open full screen (full browser window). Probably the easiest way would be to open GrapesJs editor in an inline frame (iframe) overlapping the whole current page, because the current page itself has a complex diagrams and canvases on it.
In the editor there should be a button(s) to close it and save the result into the `Layout` field.
As there is a variable number of layouts to edit on one page, I think that the editor should not rely on (be bound to) a textarea element with any predefined ID. The code that adds/removes the `layout` fields is quite simple, the GrapesJs binding may be incorporated into it (unless you suggest otherwise).
Currently manual editing of the `Layout` field results in changing some internal objects. That shouldn't be lost.
There is no need in communicating with the back end, just change the textarea contents.
You should not use jquery or any other complex libraries. As mentioned above, we use `[login to view URL]`, as well as smaller libs like `min-dom` etc.
We have some questions on best practices, like if it is okay to keep the styles that GrapesJs creates right in the <style> element of the created html snippet. I welcome advise and consultancy on how things should look like visually, as well as on how we can add additional GrapesJs modules (blocks, components with their own js) to make it comfortable for a user to create functional pages easily. We're going to have components like 'bpmn editor', 'google maps', 'sipml5 phone' that the user will be able to place onto their pages. Creating these types of blocks/components will be our next tasks.
In your proposal, please answer or comment the following:
Describe your experience with GrapesJs. How is it compared to its analogs?
Ask questions regarding the task. Is the scope clear or you need any clarifications to assess the effort?
Please give some small (free) advise on how better to employ the GrapesJs library. Alternatively, tell us about any difficulties you have faced when working with GrapesJs.
Name your price for this task within our budget. How long may it take to fulfill the task and what exactly is going to be done during this time?
Sorry for not answering to irrelevant and automated proposals.