🤔 How to: — GrapesJS #3483

Hola @artf,
Muchísimas gracias por la ayuda anterior. Estoy más novato en desarrollo. Por favor, ayudadme con lo siguiente

Necesito un modal donde reciba la entrada del usuario, como nombre de bloque, categoría, HTML, CSS, JS y luego haga clic en guardar para guardarlo como nuevo gestor de bloques. Significa cómo pasar esos datos y almacenarlos como componentes dragabe

He creado el botón para llamar al modal y establecer título también contenido, pero el editor no se ha iniciado

Imagen ! imagen

Fragmento de códigoTEXT

function buildCodeEditor(type) {
var codeEditor = editor. CodeManager.getViewer('CodeMirror').clone();
codeEditor.set({
CodeName: type === 'html' ? 'htmlmixed' : 'css',
Onlyread: false,
Tema: 'Rayuela',
autoBeautify: cierto,
autoCloseTags: cierto,
autoCloseBrackets: cierto,
styleActiveLine: cierto,
smartIndent: cierto,
});
return codeEditor;
}

función setupHtmlAutoUpdates(htmlCodeEditor) {
Función actualización() {
const htmlCode = htmlCodeEditor.editor.getValue()
si (!htmlCode) return;
editor.setComponents(htmlCode);
}
var delay;
htmlCodeEditor.editor.on('change', function() {
clearTimeout (retraso);
retraso = setTimeout(update, 300);
});
htmlCodeEditor.editor.refresh();
}

function setupCssAutoUpdates(cssCodeEditor) {
Función actualización() {
const cssCode = cssCodeEditor.editor.getValue()
si (!cssCode) regresan;
editor.setStyle(cssCode);
}
var delay;
cssCodeEditor.editor.on('change', function() {
clearTimeout (retraso);
retraso = 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], {
    dirección: 'vertical',
    Tallas: [50, 50],
    Tamaño mínimo: 100,
    canaletaTamaño: 2,
    onDragEnd: () => {
        htmlCodeEditor.editor.refresh();
        cssCodeEditor.editor.refresh();
    }
});

setupHtmlAutoUpdates(htmlCodeEditor);
setupCssAutoUpdates(cssCodeEditor);

Asegúrate de que el editor esté al tanto del cambio de ancho después de que termine el efecto de 300ms
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('Añadir tu componente personalizado');
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="ej. 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()"> Guardar </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();
}

en el índice HTML

Añadir bloque personalizado
editor.on('load', function() {
var $ = uvasjs.$;
Añadir un botón de bloque personalizado dentro de la sección de bloques
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 = 'ninguno';
}
}

Para que lo sepas...

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

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

Gracias por informar de esto, @Palash-Mandal.

Buena pregunta sobre ****. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));


**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!

Pregunta

Respuestas (2)

Preguntas y respuestas relacionadas

Componente Lightbox

[AYUDA BUSCADA] Cómo cargar un CSS que se pueda ver en el visor de código y también exportarse mientras se guarda

Problema al arrastrar un componente compuesto por imagen y enlace

¿Cómo puedo conseguir código JS sin comprimir para editarlo?

Plugins de pago que cumplen con este problema

Explorar categorías de plugins