Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to make editor disabled #266

Open
ankit opened this issue May 23, 2011 · 13 comments
Open

Option to make editor disabled #266

ankit opened this issue May 23, 2011 · 13 comments

Comments

@ankit
Copy link

@ankit ankit commented May 23, 2011

Similar to the 'disabled' attribute of a textarea.

it will be similar to the readOnly mode, only no user interaction will be allowed with the editor. So, cursor and any line markers will be hidden.
@gissues:{"order":73.29192546583863,"status":"backlog"}

@DanielGibbsNZ

This comment has been minimized.

Copy link

@DanielGibbsNZ DanielGibbsNZ commented Apr 11, 2013

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

@nightwing

This comment has been minimized.

Copy link
Member

@nightwing nightwing commented Apr 14, 2013

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.

@DanielGibbsNZ

This comment has been minimized.

Copy link

@DanielGibbsNZ DanielGibbsNZ commented Apr 15, 2013

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.

@nightwing

This comment has been minimized.

Copy link
Member

@nightwing nightwing commented Apr 15, 2013

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

@DanielGibbsNZ

This comment has been minimized.

Copy link

@DanielGibbsNZ DanielGibbsNZ commented Apr 15, 2013

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. :/

@nightwing

This comment has been minimized.

Copy link
Member

@nightwing nightwing commented Apr 17, 2013

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

@MichaelDrogalis

This comment has been minimized.

Copy link

@MichaelDrogalis MichaelDrogalis commented Dec 23, 2014

Thanks for this!

@Dvisacker

This comment has been minimized.

Copy link

@Dvisacker Dvisacker commented Dec 18, 2016

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

@frimdo

This comment has been minimized.

Copy link

@frimdo frimdo commented Apr 21, 2018

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

@ILNILEY

This comment has been minimized.

Copy link

@ILNILEY ILNILEY commented Jun 1, 2018

@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?

@ILNILEY

This comment has been minimized.

Copy link

@ILNILEY ILNILEY commented Jun 1, 2018

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?

@lcswillems

This comment has been minimized.

Copy link

@lcswillems lcswillems commented Jul 2, 2019

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

@jbolle

This comment has been minimized.

Copy link

@jbolle jbolle commented Jul 11, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.