pgt_etemplates_creative_fld.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <div class="bx-form-input-wrapper bx-form-input-wrapper-textarea">
  2. <textarea id="__html_id__-html" class="hidden" name="content">__content_html__</textarea>
  3. <textarea id="__html_id__-data" class="hidden">__content_data__</textarea>
  4. <div id="__html_id__" class="bx-form-input-textarea"></div>
  5. </div>
  6. <script type="text/javascript">
  7. var inlineStorage = null;
  8. if(inlineStorage == undefined) {
  9. inlineStorage = (editor) => {
  10. const oStorageData = document.getElementById('__html_id__-data');
  11. const oStorageHtml = document.getElementById('__html_id__-html');
  12. editor.Storage.add('inline', {
  13. load() {
  14. return JSON.parse(oStorageData.value || '{}');
  15. },
  16. store(data) {
  17. const component = editor.Pages.getSelected().getMainComponent();
  18. oStorageData.value = JSON.stringify(data);
  19. oStorageHtml.value = `<style>${editor.getCss({ component })}</style>${editor.getHtml({ component })}`;
  20. }
  21. });
  22. };
  23. }
  24. var oBuilder = grapesjs.init({
  25. container : '#__html_id__',
  26. plugins: [inlineStorage, 'grapesjs-preset-newsletter'],
  27. pluginsOpts: {
  28. 'grapesjs-preset-newsletter': {}
  29. },
  30. storageManager: {
  31. type: 'inline',
  32. autosave: true,
  33. autoload: true
  34. }
  35. });
  36. </script>