bp_block_skeleton_creative.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  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, 'gjs-blocks-basic', 'grapesjs-style-bg', 'grapesjs-preset-webpage'],
  27. pluginsOpts: {
  28. 'gjs-blocks-basic': { flexGrid: true },
  29. 'grapesjs-preset-webpage': {}
  30. },
  31. storageManager: {
  32. type: 'inline',
  33. autosave: true,
  34. autoload: true
  35. }
  36. });
  37. </script>