[QUESTION] Not editable block after import template
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 #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...
Issue #1846
[Question]: Using ngModel on component that contains groups of tagName
I have tried this solution https://github.com/artf/grapesjs/issues/1819#event-2158016066 But on custom components Let's say, i have a mixtu...
Issue #2434
[Question] Exclude html elements from model
This is a broad question, so I will provide the use case and some ideas instead of actual code.Basic description We are using grapesjs as p...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.