Not editable block after import template
Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution: editor.setComponents(JSON.parse(value.components)); editor.setStyle(JSON.parse(value.styles));
Read full answer below ↓Question
Have the same issue like in 1408. You said that JSON should be imported instead of the HTML. Can you tell me please how to import JSON template? I can't find the solution.
On 'storage:store' I fetch an object:
{ assets: "", components: "", css: "", html: "", styles: "" }
Then I run command:
let emailTemplateStr = editor.runCommand('gjs-get-inlined-html')
and save it.
But after import this template(this.editor.setComponents(template)) some blocks have changed from "text" to "box" and are not editable by CKEditor. So, how the object should look to import it properly? As I guess I should put components and styles to this object. But I have no idea what is it's structure.
Answers (3)
Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution:
editor.setComponents(JSON.parse(value.components));
editor.setStyle(JSON.parse(value.styles));
@artf if I use <strong>text </strong> importer template will fail and convert text element into box sample template to reproduce the issue. #1906
<tbody id="inej" class="c1363 c7121 c10266 c12726 c22143" style="box-sizing: border-box;">
<tr id="iqhg" class="c1371 c7130 c10276 c12737 c22155" style="box-sizing: border-box;">
<td valign="top" id="iajj" class="c6692 c1379 c7139 c10286 c12748 c22167" style="box-sizing: border-box; font-size: 12px; font-weight: 300; vertical-align: top; color: rgb(111, 119, 125); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
<table width="100%" height="150" id="inlm" class="c7742 c1516 c7149 c10296 c12760 c22180" style="overflow-wrap: break-word; hyphens: auto; box-sizing: border-box; height: 150px; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 100%;">
<tbody id="ixxl" class="c1525 c7159 c10306 c12772 c22193" style="box-sizing: border-box;">
<tr id="i2r4" class="c1533 c7168 c10316 c12783 c22205" style="box-sizing: border-box;">
<td valign="top" id="iv9e" class="c7766 c1541 c7177 c10326 c12794 c22217" style="box-sizing: border-box; font-size: 12px; font-weight: 300; color: rgb(111, 119, 125); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; vertical-align: top;">
<div id="i20i" class="c12862 c7187 c10336 c12806 c22230" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-weight: 400; font-size: 14px; font-style: normal; font-family: Arial, Helvetica, sans-serif; color: rgb(0, 0, 0);">
<br id="ir9rg" class="c22260" style="box-sizing: border-box;">
<br id="iwcfg" class="c22269" style="box-sizing: border-box;">Ryan, here...
<br id="iumju" class="c22287" style="box-sizing: border-box;">
<br id="ipt4h" class="c22296" style="box-sizing: border-box;">It was great connecting with you on our Discovery Call!
<br id="iqbfb" class="c22314" style="box-sizing: border-box;">
<br id="iwkb2" class="c22323" style="box-sizing: border-box;">As mentioned, here is a direct link to our website so that you can learn more about our philisophy at
<em id="i5kze" class="c22341" style="box-sizing: border-box;">How To Manage A Small Law Firm</em> as well as why we're THE largest and fastest growing
<strong id="i5xet" class="c22359" style="box-sizing: border-box;"><em id="iyyid" class="c22367" style="box-sizing: border-box;">Community</em></strong> of Entrepreneurial Lawyers in existence...
<br id="idiu2" class="c22395" style="box-sizing: border-box;">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>```
Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution:
editor.setComponents(JSON.parse(value.components));editor.setStyle(JSON.parse(value.styles));
what is "value" ?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3119
[QUESTION] How to create custom block made of grapesjs components?
Hi, i want to have custom blocks made of grapesjs components. I found solution how to add components: https://github.com/artf/grapesjs/issu...
Issue #4732
Tabs behaviour after HTML import
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 107 (MacOS) Reproducible demo link...
Issue #3245
grapesjs-custom-code doesn't execute <script> from GrapesJS 0.16.30 and up
grapesjs-custom-code work fine with script tag until GrapesJS 0.16.27, after this version, no script content is executed. ✔️ Editor init()...
Issue #3058
How to modify existing block properties in style manager
Version: 0.15.9 How to modify/remove few CSS properties for existing blocks like(text, image) in style manager I have checked the following...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.