Edit HTML that is in a using GrapesJs</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2020-05-10T10:11:33.917" class="fromnow">May 10 '20 at 10:11</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-11-07T18:55:52.357" datetime="2022-11-07T18:55:52.357">Nov 07 '22 at 18:55</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 2,017 times"> <span class="fc-light mr2">Viewed</span> 2,017 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="61710255" data-ownerid="499377" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="61710255"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><strong>I want to provide a visual editor to an HTML snippet that is currently edited using a simple <code><textarea></code> field.</strong></p> <p>I am trying to learn GrapesJs to achieve this, but I can't grasp the idea. As far as I understood GrapesJs is rendered into the specified <code><div></code>, possibly taking the same <code><div></code> contents as it's initial template to edit, and then I guess it modifies the DOM or stores its work in browser storage.</p> <p>If I understand it correctly I still can't get how to change this behaviour to deal with my <code><textarea></code> situation. I need the editor to take the <code><textarea></code> contents as its initial template and eventually put the modified HTML snippet back into it as text (?). So we don't need to store our DOM anywhere or send the HTML to server. The form in which this <code><textarea></code> is will be responsible to put it to the backend.</p> <p>This also makes me wonder how GrapesJs can be separated from the form on which the <code><textarea></code> is placed, which may have its own styles and code.</p> <p>And what will Grapes do to the styles and javascripts of the page being edited? Will they be the part of the text that GrapesJs will produce?...</p> <p><strong>I will appreciate a small code example that will open up a GrapesJs visual editor that will take and store its work to/from a <code><textarea></code></strong></p> <p><em>I can create two <code><textarea></code>s for html and styles if it is unavoidabe</em></p> <p>(I find the docs confusing for my level of knowledge in terms of logical separation of the editor itself and the page that we are editing, I currently fail to get my head around these notions in the docs)</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/grapesjs" class="post-tag js-gps-track" title="show questions tagged 'grapesjs'" rel="tag">grapesjs</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 10 '20 at 10:11">asked May 10 '20 at 10:11</time> <a href="../../users/499377/fedd" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/499377.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="fedd" /> </a> <div class="s-user-card--info"> <a href="../../users/499377/fedd" class="s-user-card--link">fedd</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">880</li> <li class="s-award-bling s-award-blingsilver" title="12 silver badges">12</li> <li class="s-award-bling s-award-blingbronze" title="39 bronze badges">39</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="61744130"></a> <div id="answer-61744130" class="answer accepted-answer" data-answerid="61744130" data-ownerid="5842930" data-score="2" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="61744130"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><h3>Updated</h3> <p>I think in this case you can hook into <code>component</code> events like add, update, remove to update your textareas.</p> <p>In the following example I'm doing so <a class="external-link" href="https://codepen.io/jvas28/pen/MWaXGyW" rel="nofollow noreferrer">Codepen</a></p> <pre><code>const editor = grapesjs.init({ height: '100%', container: '#gjs', showOffsets: true, fromElement: true, noticeOnUnload: false, storageManager: false, plugins: ['grapesjs-preset-webpage'], }); const htmlTextarea = document.getElementById('html') const cssTextarea = document.getElementById('css') const updateTextarea = (component, editor)=>{ const e = component.em.get("Editor"); htmlTextarea.value= e.getHtml(); cssTextarea.value= e.getCss(); } editor.on('component:add', updateTextarea); editor.on('component:update', updateTextarea); editor.on('component:remove', updateTextarea); const updateInstance = () => { editor.setComponents(htmlTextarea.value) editor.setStyle(cssTextarea.value) } document.getElementById('save').onclick=updateInstance; </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-05-12T15:52:49.103" class="relativetime">May 12 '20 at 15:52</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Julio Vásconez</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 12 '20 at 04:57">answered May 12 '20 at 04:57</time> <a href="../../users/5842930/julio-vasconez" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5842930.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Julio Vásconez" /> </a> <div class="s-user-card--info"> <a href="../../users/5842930/julio-vasconez" class="s-user-card--link">Julio Vásconez</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">308</li> <li class="s-award-bling s-award-blingsilver" title="5 silver badges">5</li> <li class="s-award-bling s-award-bling__bronze" title="11 bronze badges">11</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-61744130" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="61744130" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-109219084" class="comment js-comment " data-comment-id="109219084" data-comment-owner-id="499377" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment109219084_61744130"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you! Am I correct to assume that this solution never takes its data from the textareas, only puts it there?</span> – <a href="../../users/499377/fedd" title="880 reputation" class="comment-user owner">fedd</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/61710255/edit-html-that-is-in-a-textarea-using-grapesjs#comment109219084_61744130"><span title="2020-05-12T08:14:22.643 License: CC BY-SA 4.0" class="relativetime-clean">May 12 '20 at 08:14</span></a></span> </div> </div> </li> <li id="comment-109221398" class="comment js-comment " data-comment-id="109221398" data-comment-owner-id="499377" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment109221398_61744130"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">just can't find `setHtml`/`setCss` functions of the editor...</span> – <a href="../../users/499377/fedd" title="880 reputation" class="comment-user owner">fedd</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/61710255/edit-html-that-is-in-a-textarea-using-grapesjs#comment109221398_61744130"><span title="2020-05-12T09:26:06.943 License: CC BY-SA 4.0" class="relativetime-clean">May 12 '20 at 09:26</span></a></span> </div> </div> </li> <li id="comment-109223434" class="comment js-comment " data-comment-id="109223434" data-comment-owner-id="499377" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment109223434_61744130"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks! The "Save" button allows the initial load, the subsequent button clicks break things up.. but it's okay! I think I've got the idea how to load data into the editor. By the way it works better if I swap `setStyle` and `setComponents`. Seems like setting components first affects the styles and then we set the styles again. But it's just a guess. Thanks again!</span> – <a href="../../users/499377/fedd" title="880 reputation" class="comment-user owner">fedd</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/61710255/edit-html-that-is-in-a-textarea-using-grapesjs#comment109223434_61744130"><span title="2020-05-12T10:28:12.387 License: CC BY-SA 4.0" class="relativetime-clean">May 12 '20 at 10:28</span></a></span> </div> </div> </li> <li id="comment-109233718" class="comment js-comment " data-comment-id="109233718" data-comment-owner-id="5842930" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment109233718_61744130"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You are right, check last update, now you can do it in both ways :)</span> – <a href="../../users/5842930/julio-vasconez" title="308 reputation" class="comment-user ">Julio Vásconez</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/61710255/edit-html-that-is-in-a-textarea-using-grapesjs#comment109233718_61744130"><span title="2020-05-12T15:11:50.370 License: CC BY-SA 4.0" class="relativetime-clean">May 12 '20 at 15:11</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="74351545"></a> <div id="answer-74351545" class="answer " data-answerid="74351545" data-ownerid="5255828" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="74351545"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can use Storage Manager of the <a class="external-link" href="https://grapesjs.com/docs/modules/Storage.html" rel="nofollow noreferrer">GrapesJS</a></p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Inline storage const inlineStorage = (editor) => { const projectCssEl = document.getElementById("css"); const projectHtmlEl = document.getElementById("html"); console.log(projectHtmlEl); editor.Storage.add("inline", { load() { editor.setComponents(projectHtmlEl.value); }, store(data) { const component = editor.Pages.getSelected().getMainComponent(); projectCssEl.value = editor.getCss({ component }); projectHtmlEl.value = `<html> ${editor.getHtml({ component })} <html>`; } }); }; // Init editor grapesjs.init({ container: "#gjs", height: "500px", plugins: [inlineStorage, "grapesjs-preset-webpage"], pluginsOpts: { "grapesjs-preset-webpage": { // options } }, storageManager: { type: "inline" } });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html { height: 100%; margin: 0; } #css, #html { width: 40%; height: 100px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html> <html> <head> <meta charset="utf-8"> <title>Grapesjs textarea</title> <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css"> <script src="//unpkg.com/grapesjs"></script> <script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@1.0.2/dist/index.min.js"></script> </head> <body> <textarea id="html"></textarea> <textarea id="css"></textarea> <div id="gjs"> <h1>Hello World Component!</h1> </div> <button id="save">Save</button> </div> </body> </html></code></pre> </div> </div> <p>There is a <a class="external-link" href="https://codepen.io/andrejro2/pen/vYryXrg" rel="nofollow noreferrer">Codepen</a> with a working code</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 07 '22 at 18:55">answered Nov 07 '22 at 18:55</time> <a href="../../users/5255828/andrew-kozoriz" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5255828.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Andrew Kozoriz" /> </a> <div class="s-user-card--info"> <a href="../../users/5255828/andrew-kozoriz" class="s-user-card--link">Andrew Kozoriz</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">111</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>