<script type="text/javascript">
    var initData{{ widget.attrs.id }} = {
        storageManager: false,
        fromElement: true,
        showOffsets: true,
        selectorManager: { componentFirst: true },
        assetManager: {
            // Upload endpoint, set `false` to disable upload, default `false`
            upload: '{% url 'admin:dgjs_upload' %}',
            // The name used in POST to pass uploaded files, default: `'files'`
            uploadName: 'files',
        },
        allowScripts: 1,
        plugins: ['gjs-preset-newsletter', 'gjs-plugin-ckeditor', 'grapesjs-preset-webpage'],
        pluginsOpts: {
          'gjs-preset-newsletter': {
            modalLabelImport: 'Paste all your code here below and click import',
            modalLabelExport: 'Copy the code and use it wherever you want',
            codeViewerTheme: 'material',
            //defaultTemplate: templateImport,
            importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
            cellStyle: {
              'font-size': '12px',
              'font-weight': 300,
              'vertical-align': 'top',
              color: 'rgb(111, 119, 125)',
              margin: 0,
              padding: 0,
            }
          },
          'gjs-plugin-ckeditor': {
            position: 'center',
            options: {
              startupFocus: true,
              extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
              allowedContent: true, // Disable auto-formatting, class removing, etc.
              enterMode: CKEDITOR.ENTER_BR,
              extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
              toolbar: [
                { name: 'styles', items: ['Font', 'FontSize' ] },
                ['Bold', 'Italic', 'Underline', 'Strike'],
                {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
                {name: 'links', items: ['Link', 'Unlink']},
                {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
              ],
            }
          }
        },
      }
</script>

