🤔 How to: — GrapesJS #3483

Hello @artf ,
Many Many Thanks for previous help. I am fresher in development. Please help me with below

I need a modal where I will get user input Like Block Name, Category, HTML, CSS, JS then click on save to store that as new block manager. Mean how to pass those data and store them as dragabe component

I have made the button to call modal and set title also content but editor not initiated

image

Code SnippetTEXT

function buildCodeEditor(type) {
var codeEditor = editor.CodeManager.getViewer('CodeMirror').clone();
codeEditor.set({
codeName: type === 'html' ? 'htmlmixed' : 'css',
readOnly: false,
theme: 'hopscotch',
autoBeautify: true,
autoCloseTags: true,
autoCloseBrackets: true,
styleActiveLine: true,
smartIndent: true,
});
return codeEditor;
}

function setupHtmlAutoUpdates(htmlCodeEditor) {
function update() {
const htmlCode = htmlCodeEditor.editor.getValue()
if (!htmlCode) return;
editor.setComponents(htmlCode);
}
var delay;
htmlCodeEditor.editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(update, 300);
});
// htmlCodeEditor.editor.refresh();
}

function setupCssAutoUpdates(cssCodeEditor) {
function update() {
const cssCode = cssCodeEditor.editor.getValue()
if (!cssCode) return;
editor.setStyle(cssCode);
}
var delay;
cssCodeEditor.editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(update, 300);
});
}

function buildCodePanel(panel) {
const codePanel = document.createElement('div');
codePanel.classList.add('code-panel');

const htmlSection = document.createElement('section');
const cssSection = document.createElement('section');
htmlSection.innerHTML = '<div>HTML</div>'
cssSection.innerHTML = '<div>CSS</div>'

const htmlCodeEditor = buildCodeEditor('html')
const cssCodeEditor = buildCodeEditor('css')
const htmlTextArea = document.createElement('textarea');
const cssTextArea = document.createElement('textarea');
htmlSection.appendChild(htmlTextArea);
cssSection.appendChild(cssTextArea);

codePanel.appendChild(htmlSection);
codePanel.appendChild(cssSection);
modal.set('appendContent', codePanel).trigger('change:appendContent');
htmlCodeEditor.init(htmlTextArea);
cssCodeEditor.init(cssTextArea);
htmlCodeEditor.setContent(editor.getHtml());
cssCodeEditor.setContent(editor.getCss({ avoidProtected: true }));

Split([htmlSection, cssSection], {
    direction: 'vertical',
    sizes: [50, 50],
    minSize: 100,
    gutterSize: 2,
    onDragEnd: () => {
        htmlCodeEditor.editor.refresh();
        cssCodeEditor.editor.refresh();
    }
});

setupHtmlAutoUpdates(htmlCodeEditor);
setupCssAutoUpdates(cssCodeEditor);

// make sure editor is aware of width change after the 300ms effect ends
setTimeout(() => {
    htmlCodeEditor.editor.refresh();
    cssCodeEditor.editor.refresh();
}, 320)

return codePanel
}

function AddCustomBlockBtn() {
var em = editor.Modal;
document.querySelector('.gjs-mdl-dialog').style.maxWidth = '80%';
em.setTitle('Add Your Custom Component');
em.setContent(<div class="accmodal"> <div class="accmodal__header"> <div class="accmodal__hitem"> <label class="accmodal__hlbl">Name</label> <input type="text" name="name" id="input-name" required="required" placeholder="eg. Button" class="accmodal__hinpt"> </div> <div class="accmodal__hitem"> <label class="accmodal__hlbl">Name</label> <input type="file" name="previewImage" id="PreviewImage" required="required" class="accmodal__hfile"> </div> <button id="SaveCustomBlockBtn" type="button" class="gjs-btn-prim accmodal__hsave" onclick="SaveCustomBlockBtn()"> Save </button> </div> <div class="accmodal__editor"> <div class="accmodal__editorbox accmodal__editorhtml"> <textarea id="editorHtml"></textarea> </div> <div class="accmodal__editorbox accmodal__editorcss"> <textarea id="editorCSS"></textarea> </div> </div> </div>);
em.open();
}

in index html

Add custom block
editor.on('load', function() {
var $ = grapesjs.$;
// Add custom block button inside block section
if (openBlocksBtn && openBlocksBtn.set('active', 1)) {
var AddCtBlock = document.querySelector('.cmseditor__addctblock');
var gtBlockPanel = document.querySelector('.gjs-blocks-cs');
gtBlockPanel.appendChild(AddCtBlock).removeAttribute('style');
} else {
gtBlockPanel.style.display = 'none';
}
}

FYI..



![image](https://user-images.githubusercontent.com/17553816/119516966-d453c000-bd94-11eb-9a48-d15e295f9c2a.png)

![image](https://user-images.githubusercontent.com/17553816/119517133-f9e0c980-bd94-11eb-9886-5b6e27f07799.png)

Thanks for reporting this, @Palash-Mandal.

Great question about ****. The recommended approach with StyleManager is to use the event-driven API.

Start here:

Check the GrapesJS documentation for your specific module
Look for the on() event listener method
Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

Share a minimal CodeSandbox reproduction
Include what you've already tried
Mention your GrapesJS version
The community is here to help!

Question

Answers (2)

Related Questions and Answers

Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin

Help needed: Get the component that a block being dropped onto?

How can I get Uncompressed JS code for me to edit?

Lightbox Component

Paid Plugins That Match This Issue

Browse Plugin Categories