Closed

GrapesJs Integration

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.

Skills: Javascript, HTML5

See more: facebook styles, zencart integration html, google maps asp net integration, host integration service sna lua, integration asterisk ser, mals shopping cart integration, idx integration software, postaffiliatepro integration, django anti spam integration, creates styles phpbb3, phpbb3 styles column right, barqab consultancy contracts hesco for ht and lt proposals

About the Employer:
( 0 reviews ) St Petersburg, Russian Federation

Project ID: #20923273

6 freelancers are bidding on average $484 for this job

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 More

$350 USD in 3 days
(30 Reviews)
5.5
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 More

$555 USD in 5 days
(51 Reviews)
5.2
webdevangel

Hello ! thank you for your post. I'm a expert of Web development have the experience of 5 years. My skills are as followings. 1. mobile : android, iphone , PhoneGap, ionic, Java, ObjectiveC. 2. front end : HTML5, boo More

$500 USD in 7 days
(25 Reviews)
5.2
MFR007

Hello Sir, I will integrate Grapesjs into your CRM app or website with all of its modules including newsletter, designer, scheduler, etc. as per your requirements. I have already integrated Grapesjs for one of my clien More

$500 USD in 3 days
(2 Reviews)
2.7
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 More

$500 USD in 7 days
(2 Reviews)
2.5
agulraze

Dear Employer Thanks for submitting project. Very Short Introduction We are Professional Private Limited Company having international joint ventures and managing offshore companies in UK,USA,C More

$500 USD in 10 days
(0 Reviews)
0.0