Pregunta: ¿Arrastrar bloques a un bloque de texto?

Probablemente en la próxima versión esta función estará disponible. ! disponible por mensaje

Así que 'textible' será solo otra propiedad, esto permitirá que cualquier componente se elimine dentro de los componentes de texto. Aquí está el código del componente del ejemplo anterior: '''js Define un componente con la propiedad 'textible' editor. DomComponents.addType('var-placeholder', { modelo: { Predeterminados: { Textible: 1, marcador de posición: 'VARIABLE-1', }, toHTML() { return '{{ ${this.get('placeholder')} }}'; }, }, La vista de abajo es solo un ejemplo de cómo crear una experiencia de usuario diferente Vista: { etiquetaNombre: 'span', eventos: { 'cambio': 'actualizaciónPlh', }, Actualiza el modelo una vez que se cambie la selección updatePlh(ev) { this.model.set({ placeholder: ev.target.value }); this.updateProps(); }, Cuando difuminamos desde un TextComponent, todos sus componentes hijos son aplanado mediante innerHTML y analizado por el editor. Así que mantener el estado de nuestros props sincronizados con el modelo, así que necesitamos exponer los props en el HTML updateProps() { const { el, model } = this; el.setAttribute('data-gjs-placeholder', model.get('placeholder')); }, onRender() { const { model, el } = this; const currentPlh = model.get('placeholder'); const select = document.createElement('select'); const options = [ 'VARIABLE-1', 'VARIABLE-2', 'VARIABLE-3' ]; select.innerHTML = options.map(element => '<valor de opción="${item}" ${elemento === currentPlh ? 'seleccionado' : ''}> ${item} ')</option>.unir(''); mientras que (el.primerNiño) el.removeChild(el.primerNiño); el.appendChild(select); select.setAttribute('style', 'addding: 5px; border-radius: 3px; border: none; -webkit-appearance: none;'); this.updateProps(); }, } });

Usar el componente en bloques editor. BlockManager.add('simple-block', { etiqueta: 'Bloque textible', Contenido: { Tipo: 'var-placeholder' }, });

Sí, lo he usado y prácticamente lo he conseguido funcionar. La diferencia es que yo no estoy usando un marcador de texto como tú. De hecho, estoy insertando un bloque (con un 'tipo' correspondiente) para poder configurar aún más estos marcadores de posición (por ejemplo, un campo podría ser un campo de Fecha y Hora y mi usuario podría querer configurar el formato exacto de salida para esa fecha-hora). Usé HTML5 arrastrando y soltando para implementar esto y funciona bastante bien, pero qué...

Parece que se aleja de la interfaz de usuario esperada. Creo que debería poder arrastrar un campo de fusión desde los 'bloques' y colocarlo en la posición correcta. He estado probando con el Clasificador para que esto lo permita y estoy dispuesto a esto:

! imagen

Ahora tengo el problema de que el Clasificador quiere mucho bloques reales para alinearse, así que tengo que ajustar más. Por ahora, implementar esto ha requerido cambiar en la ComponentTextView (principalmente: no vaciar la barra de herramientas para 'mergefields') y en el Sorter (si estoy pasando el cursor por un mergefield sobre un bloque de texto, insertar HTML en el activeRTE en lugar de añadir un bloque).

Actualmente estoy trabajando para que el arrastre funcione de forma más fiable (por alguna razón, cada vez que arrastro derecha el campo se añade al nodo de texto en lugar de en la posición del cursor, funciona bien al arrastrar izquierda :)), haciendo que el ordenador ignore la idea de 'bloques' cuando está dentro de un campo de texto, mostrando el marcador de posición correcto en ese caso (querría ver el cursor real) y limpiando todo.

No estoy seguro de cómo abordar el tema del Clasificador en este momento, salvo especializar bloques de texto, así que si tienes alguna idea en ese ámbito me encantaría escucharla. Puedes ver parte del código improvisado que he hecho hasta ahora en https://github.com/mathieuk/grapesjs/commit/d58c5ee5306c358cd19509f6b8affe9bb60493ed .