Ace: Option to make editor disabled

Has this been implemented anywhere? I would also find this feature very useful.

What is the usecase for this? I don't want to add this to the core since it's rarely used and easy to implement

Something like

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()

or this

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)

would work.

The aim isn't to make it visually look disabled, the aim is to remove the ability for the user to interact with it. I.e. they can't control the cursor, (even better, the cursor doesn't exist).
This is just a more strict type of read-only rather than "disabled". This would be handy when using the editor to display code samples, or output from running programs on the webpage. While this might not be the ideal use for the editor, its features like syntax highlighting and generally looking good make it an attractive option to use for things like these.

Both the samples of code don't really accomplish this. Neither of them removes the cursor, and while they do a pretty good job of not letting the user control the cursor, focus can be tabbed onto the editor.

Ah, i see now.
But how much of editor functionality should be disabled depends on exact use case.
I think selection and ability to focus the editor shouldn't be disabled in either of those cases. Virtual viewport will be useful for displaying output, but browser selection can't work with it. And for code examples it's usually nice to be able to do ctrl+a ctrl+c.

To hide cursor and line highlights

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

to make editor non tabbable

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

to disable all shortcuts

editor.commands.commmandKeyBinding={}

also i can add destroy methods for $mouseHandler and textInput to disable them altogether

Excellent, that has the effect I was after. I agree about the requirements differing based on the exact use case, but it might be handy to have several options to disable things like the cursors, or the shortcuts etc.

Also, the last line of code above seems to stop the editor displaying anything at all. :/

Also, the last line of code above seems to stop the editor displaying anything at all. :/

do you mean editor.commands.commmandKeyBinding={}? that'd be very strange

Thanks for this!

Thanks, definitely need an option to make the editor disabled !

Hi, did you implement the $mouseHandler destroyer? I am a little bit lost (newbie here). Or is there any way to disable it? Thanks for editor disabling btw :-)

@nightwing
editor.renderer.$cursorLayer.element.style.opacity=0
It seems that $cursorLayer is not an attribute of VirtualRenderer now.
I want to hide the cursor when my editor is in 'readOnly' state,and I try the method you had given,but it doesn't work for the reason that $cursorLayer is not an attribute of VirtualRenderer ;Is there any other way to hide the cursor?

I found there are two method in VirtualRenderer,hideCursor() and setCursorStyle(), and I try to use them in belowing way.But it dosen't work as well.
this._editor.renderer.hideCursor();
this._editor.renderer.setCursorStyle("opacity: 0;");
Am I wrong in using?

Is it work in progress? I would like to disable the editor when the focus out of it.

Same here! I would like to use renderer.hideCursor() method but it doesn't seem to work. I tried to call it in my editor init block and in changeCursor event but I'm unable to make it work.

for people still want to disable cursor, use css3 property pointer-events: none; on the editor element.

How do I disable the editor, still just a new react developer? Please would appreciate any help

for people still want to disable cursor, use css3 property pointer-events: none; on the editor element.

How do you disable the editor ?

for people still want to disable cursor, use css3 property pointer-events: none; on the editor element.

How do you disable the editor ?

editor.setOptions({
    readOnly: true,
})

Worked like a charm

On Wed, Sep 23, 2020, 10:27 PM Nehal Hasnayeen notifications@github.com
wrote:

for people still want to disable cursor, use css3 property pointer-events:
none; on the editor element.

How do you disable the editor ?

editor.setOptions({
readOnly: true,
})

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ajaxorg/ace/issues/266#issuecomment-698073286, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/ALIR2LMEV5BHDXPXO7RT5BTSHKVAPANCNFSM4AESJK3A
.