GrapesJs Integration

Zaprto Objavljeno pred 4 letoma/leti Plačilo ob prevzemu
Zaprto Plačilo ob prevzemu

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.

JavaScript HTML5

ID projekta: #20923273

Več o projektu

4 predlogov Oddaljen projekt Aktiven pred 4 letoma/leti

4 freelancerjev ponuja v povprečju za $476 na tem delu

Solaristech

Hi, I specialize in website design and development and am excited for this opportunity to work with you in accomplishing your goals. We have developed thousands of websites in many programming languages for clients all Več

$555 USD v 5 dneh
(71 ocen)
7.2
fastestJohn

Hello. I'm Gavrichkov. I 'm confident that my qualifications and professionalism will meet your expectation in the development of this project. Also, I will provide you the correct software program that you want exactl Več

$350 USD v 3 dneh
(33 ocen)
5.5
jinridong19713

Hi thanks for your posting. I have read your post. I am a expert who have many experiences in web design&development. In particular, I had great experiences in html5&css3&javascript&jquery&node.js&react.js&angular.js&v Več

$500 USD v 7 dneh
(8 ocen)
4.0