Issue #2998💬 AnsweredOpened September 3, 2020by svalenciano810 reactions

Insert HTML+CSS inline into [help wanted)

快速解答by Abhisheknanda1344463

Hi @svalenciano81 Did you try this? var cmdGetCode = cmdm.get('gjs-get-inlined-html');

Read full answer below ↓

Question

I have the nice ckeditor 4 editor built into grapesjs with this components:

grapesjs: 0.15.8 grapesjs-preset-newsletter: 0.2.20 ckeditor.js: 4 grapesjs-plugin-ckeditor - 0.0.9

My project generates newsletters (HTML + CSS) to be storage in database. This newsletter it can be edited and save it again as many times as you want. When the newsletter is finished editing, it can be sent by Gmail.

My problem is this:

  1. User generate newsletter (html + css) and is save it as "html + css" inline getted with; var htmlWithCss = editor.runCommand('gjs-get-inlined-html');

  2. This is saved in database.

  3. For edit the newsletter, the code is getted from database and is pushed in editor 3.1 Insert html+css inline in DOM

var component = angular.element('#gjs-mail');
component.append(htmlWithCss);

3.2 Init grapesJS over #gjs-mail

At this momment is all fine, the HTML+CSS is loaded at grapesjs editor. The problem come it when i try edit text with CKEDITOR4. The words seems are block and is difficult format text.

i have read a possible error origin, and is the form that i save the code, like tell this post:

https://github.com/artf/grapesjs/issues/1905

Any can help me to convert html+css inline to

editor.setComponents(JSON.parse(value.components));
editor.setStyle(JSON.parse(value.styles));

thanks in advanced.

Answers (3)

Abhisheknanda1344463September 3, 2020

Hi @svalenciano81 Did you try this? var cmdGetCode = cmdm.get('gjs-get-inlined-html');

svalenciano81September 3, 2020

Hi @Abhisheknanda1344463 I need the reverse process. I have the code inline and I need to separate it into components and styles separate.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.