Ace: Opción para desactivar el editor

Creado en 23 may. 2011  ·  18Comentarios  ·  Fuente: ajaxorg/ace

Similar al atributo 'deshabilitado' de un área de texto.

será similar al modo de solo lectura, solo que no se permitirá la interacción del usuario con el editor. Por lo tanto, el cursor y cualquier marcador de línea estarán ocultos.
@gissues :{"pedido":73.29192546583863,"estado":"retraso"}

Comentario más útil

Ah, ya veo.
Pero la cantidad de funcionalidad del editor que debe deshabilitarse depende del caso de uso exacto.
Creo que la selección y la capacidad de enfocar el editor no deberían deshabilitarse en ninguno de esos casos. La ventana gráfica virtual será útil para mostrar la salida, pero la selección del navegador no puede funcionar con ella. Y para los ejemplos de código, generalmente es bueno poder hacer ctrl+a ctrl+c .

Para ocultar el cursor y las líneas resaltadas

editor.setOptions({
    readOnly: true,
    highlightActiveLine: false,
    highlightGutterLine: false
})
editor.renderer.$cursorLayer.element.style.opacity=0

para hacer que el editor no se pueda tabular

editor.textInput.getElement().tabIndex=-1
 or
editor.textInput.getElement().disabled=true

para deshabilitar todos los accesos directos

editor.commands.commmandKeyBinding={}

también puedo agregar métodos de destrucción para $mouseHandler y textInput para deshabilitarlos por completo

Todos 18 comentarios

¿Se ha implementado esto en algún lugar? También encontraría esta característica muy útil.

¿Cuál es el caso de uso para esto? No quiero agregar esto al núcleo ya que rara vez se usa y es fácil de implementar

Algo como

editor.container.style.pointerEvents="none"
editor.container.style.opacity=0.5 // or use svg filter to make it gray
editor.renderer.setStyle("disabled", true)
editor.blur()

o esto

var cover = document.createElement("div")
editor.container.appendChild(cover)
cover.style.cssText = "position:absolute;\
top:0;bottom:0;right:0;left:0;\
background:rgba(150,150,150,0.5);\
z-index:100"
cover.addEventListener("mousedown", function(e){e.stopPropagation()}, true)

trabajaría.

El objetivo no es hacer que se vea visualmente deshabilitado, el objetivo es eliminar la capacidad del usuario de interactuar con él. Es decir, no pueden controlar el cursor (mejor aún, el cursor no existe).
Este es solo un tipo más estricto de solo lectura en lugar de "deshabilitado". Esto sería útil cuando se usa el editor para mostrar ejemplos de código o resultados de programas en ejecución en la página web. Si bien este podría no ser el uso ideal para el editor, sus características como el resaltado de sintaxis y su buena apariencia en general lo convierten en una opción atractiva para cosas como estas.

Ambas muestras de código realmente no logran esto. Ninguno de ellos quita el cursor, y aunque hacen un buen trabajo al no permitir que el usuario controle el cursor, el enfoque se puede tabular en el editor.

Ah, ya veo.
Pero la cantidad de funcionalidad del editor que debe deshabilitarse depende del caso de uso exacto.
Creo que la selección y la capacidad de enfocar el editor no deberían deshabilitarse en ninguno de esos casos. La ventana gráfica virtual será útil para mostrar la salida, pero la selección del navegador no puede funcionar con ella. Y para los ejemplos de código, generalmente es bueno poder hacer ctrl+a ctrl+c .

Para ocultar el cursor y las líneas resaltadas

editor.setOptions({
    readOnly: true,
    highlightActiveLine: false,
    highlightGutterLine: false
})
editor.renderer.$cursorLayer.element.style.opacity=0

para hacer que el editor no se pueda tabular

editor.textInput.getElement().tabIndex=-1
 or
editor.textInput.getElement().disabled=true

para deshabilitar todos los accesos directos

editor.commands.commmandKeyBinding={}

también puedo agregar métodos de destrucción para $mouseHandler y textInput para deshabilitarlos por completo

Excelente, eso tiene el efecto que buscaba. Estoy de acuerdo con que los requisitos difieren según el caso de uso exacto, pero podría ser útil tener varias opciones para deshabilitar cosas como los cursores o los accesos directos, etc.

Además, la última línea de código anterior parece impedir que el editor muestre nada. :/

Además, la última línea de código anterior parece impedir que el editor muestre nada. :/

te refieres a editor.commands.commmandKeyBinding={} ? eso sería muy extraño

¡Gracias por esto!

¡Gracias, definitivamente necesito una opción para deshabilitar el editor!

Hola, implementaste el destructor $mouseHandler? Estoy un poco perdido (novato aquí). O hay alguna forma de desactivarlo? Gracias por desactivar el editor por cierto :-)

@Ala noche
editor.renderer.$cursorLayer.element.style.opacity=0
Parece que $cursorLayer no es un atributo de VirtualRenderer ahora.
Quiero ocultar el cursor cuando mi editor está en estado 'solo lectura', y pruebo el método que me diste, pero no funciona porque $cursorLayer no es un atributo de VirtualRenderer; ¿hay alguna otra forma de hacerlo? ocultar el cursor?

Descubrí que hay dos métodos en VirtualRenderer, hideCursor() y setCursorStyle(), y trato de usarlos de la siguiente manera. Pero no funciona tan bien.
this._editor.renderer.hideCursor();
this._editor.renderer.setCursorStyle("opacidad: 0;");
¿Me equivoco al usar?

¿Es un trabajo en progreso? Me gustaría deshabilitar el editor cuando el foco está fuera de él.

¡Aquí igual! Me gustaría usar el método renderer.hideCursor() pero parece que no funciona. Intenté llamarlo en el bloque de inicio de mi editor y en el evento changeCursor , pero no puedo hacerlo funcionar.

para las personas que aún desean deshabilitar el cursor, use la propiedad css3 pointer-events: none; en el elemento del editor.

¿Cómo desactivo el editor, siendo solo un nuevo desarrollador de reacción? Por favor agradecería cualquier ayuda

para las personas que aún desean deshabilitar el cursor, use la propiedad css3 pointer-events: none; en el elemento del editor.

¿Cómo deshabilitas el editor?

para las personas que aún desean deshabilitar el cursor, use la propiedad css3 pointer-events: none; en el elemento del editor.

¿Cómo deshabilitas el editor?

editor.setOptions({
    readOnly: true,
})

Trabajado como un encanto

El miércoles 23 de septiembre de 2020 a las 22:27 Nehal Hasnayeen [email protected]
escribió:

para las personas que aún desean deshabilitar el cursor, use css3 property pointer-events:
ninguna; en el elemento editor.

¿Cómo deshabilitas el editor?

editor.setOptions({
solo lectura: verdadero,
})


Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/ajaxorg/ace/issues/266#issuecomment-698073286 , o
darse de baja
https://github.com/notifications/unsubscribe-auth/ALIR2LMEV5BHDXPXO7RT5BTSHKVAPANCNFSM4AESJK3A
.

¿Fue útil esta página
0 / 5 - 0 calificaciones