¿El script en el componente se estropea, alguna idea?
Si usas cualquier tipo de minificador, el script también se ve afectado. Puedes configurar el script como una cadena si necesitas mostrar el código completo al usuario
Lee la respuesta completa abajo ↓Pregunta
Creé un componente como
const TWITTER_TYPE = 'TWITTER';
domc.addType(TWITTER_TYPE, {
model: defaultModel.extend({
Predeterminados: {
... defaultModel.prototype.defaults,
Droppable: falso,
cuenta: 'OntarioAlliance',
widget_width: 425,
widget_height: 525,
Rasgos: [
{ etiqueta: 'Cuenta', nombre: 'cuenta', cambioProprop: 1, },
{ label: 'Width', nombre: 'widget_width', type: 'number', changeProp: 1, },
{ etiqueta: 'Altura', nombre: 'widget_height', tipo: 'número', cambioProp: 1, }
],
script: function() {
if(this.innerHTML.length == 0){
this.innerHTML='<a class="twitter-timeline" data-width="426" data-height="525" data-dnt="true" href="https://twitter.com/{[ cuenta ]}?ref_src=twsrc%5Etfw">Tuits de {[ cuenta ]}</a>';
if(window.twttr & & window.twttr.widgets)
twttr.widgets.load();
si no,
(función(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){
twttr.widgets.load();
regresar;
}
fjs = d.getElementsByTagName(s)[0];
js = d.createElement(s); js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}(documento, "script", "twitter-widgets"));
}
}
},
}, {
isComponent(el) {
if(el.getAttribute &&
el.getAttribute('data-gjs-type') == TWITTER_TYPE) {
return {
Tipo: TWITTER_TYPE
};
}
pero después de ponerlo en la página y revisar el HTML de exportación, veo código como el que aparece abajo
<div id="idtj">
</div>
<script>var items = document.querySelectorAll('#idtj');
para (var i = 0, len = items.length; i < len; i++) {
(función(){
0==this.innerHTML.length&&(this.innerHTML='<a class="twitter-timeline" data-width="426" data-height="525" data-dnt="true" href="https://twitter.com/OntarioAlliance?ref_src=twsrc%5Etfw">Tuits de OntarioAlliance</a>',window.twttr&&window.twttr.widgets?twttr.widgets.load():function(e,t,n){
var a,i=e.getElementsByTagName(t)[0];
if(e.getElementById(n))return void twttr.widgets.load();
i=e.getElementsByTagName(t)[0],a=e.createElement(t),a.id=n,a.src="https://platform.twitter.com/widgets.js",i.parentNode.insertBefore(a,i)}
(documento, "script", "twitter-widgets))}
.bind(elementos[i]))();
}
</script>
Mira el código después de la función(), eso desajusta la página.
¿Alguna idea?Respuestas (2)
Si usas cualquier tipo de minificador, el script también se ve afectado. Puedes configurar el script como una cadena si necesitas mostrar el código completo al usuario
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #738
La imagen volvió al tamaño original tras redimensionarse
Hola, tengo un problema extraño con el componente: Tengo 2 tipos: imagen e icono '''js domComponents.addType('icon', { model: imageModel.ex...
Issue #709
isComponent no está devolviendo el rasgo
¡Feliz año nuevo! Estoy teniendo un problema con 'isComponent()'. Aquí está mi código: Por alguna razón, la única vez que el rasgo aparece...
Issue #1155
Componente personalizado usado como HTML en bloque
He ampliado el componente de imagen por defecto '''js Export default (editor) => { const domComponents = editor. DomComponents; const image...
Issue #1959
[Pregunta] Editar innerHTML en un botón personalizado
Hola a todos, Estoy intentando cambiar el texto en un componente de botón, pero no consigo editarlo. He añadido este tipo: Incluí el paráme...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.