Replies: 1 comment 1 reply
-
Please provide a reproducible demo |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Upon delving into the intricacies of GrapesJS within the Angular framework, I have distilled my immediate needs into two distinct objectives, each representing a unique facet of my journey into this realm of web development:
My Current Code:
loadNewsLetter(): void { let host = 'https://grapesjs.com/'; this.editor = grapesjs.init({ selectorManager: { componentFirst: true }, clearOnRender: true, commands: { strict: false, // by default is true }, container: '#gjs', fromElement: true, width: 'auto', panels: { defaults: [] }, plugins: [newsLetter, ckeditor, exportFile,grapejsEvent], pluginsOpts: { [exportFile]: { addExportBtn: true }, [newsLetter]: { modalLabelImport: 'Paste all your code here below and click import', modalLabelExport: 'Copy the code and use it wherever you want', codeViewerTheme: 'material', 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, }, [exportFile]: { onToolbar: (el: { style: { minWidth: string; }; }) => { el.style.minWidth = '350px'; }, options: { startupFocus: true, extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style allowedContent: true, // Disable auto-formatting, class removing, etc. enterMode: 2, // 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' ]}, ], } }} } }); this.cleanPanel(); }
Additional Button:
` cleanPanel(): void {
[{
id: 'save-db',
className: 'fas fa-save',
command: 'save-db',
attributes: {
title: 'Save Changes'
}
}]
);
this.editor.Commands.add('save-db', {
run: function(editor, sender) {
sender && sender.set('active', 0); // turn off the button
editor.store();
//storing values to variables
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
alert('aa');
}
});
}`
Beta Was this translation helpful? Give feedback.
All reactions