Insertar/editar enlaces es difícil
Hola @duskhacker, Estoy de acuerdo en que insertar/editar enlaces no es tan intuitivo como me gustaría, y actualmente estoy trabajando en personalizarlo a través de un plugin. Aquí tienes un breve resumen de lo que estoy haciendo, dime si te interesa y puedo proporcionar el código (actualmente está enterrado en un úni...
Lee la respuesta completa abajo ↓Pregunta
Solo puedes insertarlos en lugares concretos, y ponerlos "en línea" es imposible. Por "en línea" me refiero a; Estoy escribiendo una línea de texto y quiero poner un enlace ahí, con algunas palabras resaltadas que son el enlace, y continuar con las palabras de la línea. Esta es una acción muy típica y GrapesJS simplemente no me deja hacerlo.
Una vez que consigues que se suelte en algún sitio, es difícil que el editor realmente los edite. Tienes que cronometrar el doble clic y luego hacer clic justo para que entre en modo edición. No me imagino dando eso a mis usuarios.
Voy a rendirme y desactivar los enlaces por completo para mi proyecto, ya que estoy usando el preajuste de correo y el documento objetivo es un correo, voy a confiar en la funcionalidad típica del cliente de correo para hacer clic en un enlace. Tengo esperanza de que esto se solucione en un futuro cercano. Entiendo que probablemente sea un problema difícil.
Respuestas (3)
Hola @duskhacker,
Estoy de acuerdo en que insertar/editar enlaces no es tan intuitivo como me gustaría, y actualmente estoy trabajando en personalizarlo a través de un plugin. Aquí tienes un breve resumen de lo que estoy haciendo, dime si te interesa y puedo proporcionar el código (actualmente está enterrado en un único plugin con muchas otras personalizaciones, así que tendría que hacer algo de trabajo para aislarlo):
- La edición de enlaces se realiza mediante un modal personalizado en lugar de la configuración de componentes
- Al crear un nuevo enlace a través de la barra de herramientas RTE (haciendo clic en el botón "enlace"), el modal aparece inmediatamente y permite configurar las opciones de enlace (href, título, contenido)
- También puedes abrir el modal haciendo doble clic en un enlace existente. Esto dificulta un poco habilitar el RTE, pero creo que es un intercambio justo ya que puedes editar el contenido o texto del enlace desde el modal.
- El modal ofrece una forma más fácil de usar para crear diferentes tipos de enlaces (mailto, URL personalizada, enlaces predefinidos, ancla)
- También estoy desactivando todos los rasgos predeterminados de los enlaces (puede que los sustituya por un botón personalizado de "Editar enlace"... aún no lo sé) para que solo haya una forma de cambiar los atributos del enlace
Hola @lahdekorpi creo que algo así debería funcionar '''js Resultado: RTE => { Utiliza un atributo personalizado para encontrar el componente más adelante rte.insertHTML('<span data-selectme>${rte.selection()}</span>'); const sel = editor.getSelected(); Obtén el componente de texto seleccionado por la breve sel.once('rte:disable', () => { const toSel = sel.find('[data-selectme]')[0]; Encuentra el componente para seleccionar const attr = toSel.getAttributes(); eliminar attr['data-selectme']; toSel.setAttributes(attr); eliminar el atributo personalizado toSel.set ('seleccionable', true); Asegúrate de que el componente sea seleccionable editor.select(toSel); }); sel.trigger('desactivar'); Desactiva la edición en el componente actual (esto también activará el analizador) },
@YevhenShashnin actualizado el ejemplo a medida que las funciones de habilitación/desactivación del RTE se volvieron asíncronas.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2169
[PREGUNTA]Bloque Provisional
Acabo de darme cuenta de que es difícil arrastrar bloques/componentes desde Toolbox si el marcador (una línea con color amarillo y verde, p...
Issue #2738
[PREGUNTA] Mantén el estado Hover al modificar al niño
Estoy intentando editar una opción de lista desplegable, y es bastante difícil estilizarla porque no puedes mover el ratón al Administrador...
Issue #3069
ERROR: Estilo desaparecido en el enlace o elementos de texto anidados tras salir de editar
Hola, Estoy editando HTML heredado con la versión 0.16.3 + newsleter-plugin. El estilo se almacena en línea (ya que la herramienta se usa p...
Issue #3319
El texto por capas no se centra tras crear una nueva línea
Versión: ¿Actual? Puedes obtener la versión escribiendo 'grapesjs.version' en la consola ¿Puedes reproducir el error de la demo? [ ] Sí [ x...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.