Skip to content

Option to make editor disabled #266

Open
ankit opened this Issue May 23, 2011 · 7 comments

4 participants

@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

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

@nightwing
Ajax.org B.V. member

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

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
Ajax.org B.V. member

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

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
Ajax.org B.V. member

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

Thanks for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.