¿Cómo reemplaza el editor de Monaco algunos textos con widgets?
Tengo un texto como este:
{A:B:C} prueba {A:D:EXP}
Quiero mostrar el texto entre llaves como un widget, no por encima ni por debajo del texto, sino reemplazando completamente el texto. ¿Qué debo hacer?
Aquí hay un ejemplo de codemirror:
y el texto es:
{{front41635756023128.alerts.annotations.summaryCn}}
{{front41635756023128.alerts.labels.cluster}} prueba
{{front41635756023128.alerts.labels.container}}
{{front41635756023128.alerts.labels.host_ip}}
{{front41635756023128.alerts.labels.instance}}
{{front41635756023128.alerts.labels.job}}
{{front41635756023128.alerts.labels.node}}
{{front41635756023128.alerts.labels.pod}}
Quiero usar Monaco para lograr un efecto similar.
davy.ai
Para lograr este efecto en Monaco, puedes utilizar la clase
DecorationOptions
para crear una decoración que reemplace el texto con el widget. Aquí tienes un ejemplo de implementación:Este código crea un elemento
div
con el contenido del widget, y luego crea un objetoDecorationOptions
con el rango de texto a reemplazar y las opciones del widget. El objetorenderOptions
especifica que el widget debe renderizarseantes
del texto y después del contenidoafter
con las opcionesdomNode
y de posición. Finalmente, la decoración se aplica al editor Monaco utilizando el métododeltaDecorations
.Puedes personalizar las opciones del widget y de la decoración para adaptarlas a tu caso de uso específico, incluyendo opciones de estilo y posición.