I am building a website where I want to allow people to code in almost any language that the Ace editor supports. Right now I have it redirect if they try to load a language that either isn't supported by Ace, or that I didn't list in my supported languages. I only have a few languages that I allow to run (because I haven't got others to work or don't know how to), and for all those other languages that aren't run-supported, I want to load the Ace editor with a note saying that the language they loaded isn't supported for running, but I want it to be a comment in that language.
I tried inserting the text using editor.setValue([message], -1)
. Then set the focus on the editor using editor.focus()
. Then I select all the text with editor.selectAll()
. And then use the editor.toggleCommentLines()
to make it a comment. For some reason this doesn't work, and I am not sure why.
I know that I could just look up how to write comment in each of the languages that I am allowing, and then convert the message into a comment before inserting it into the editor, but I want an easier way if possible.
Is there an easier way to do it? Or should I just do what I said that I could?
Since I answered my own question, I want to ask another to see if anyone has the answer for this:
When in the Ace editor you can press CTRL
+/
to toggle line comments. But if you press CTRL
+SHIFT
+/
it will toggle multiline comments. I don't see a function for this in the Ace editor documentation but because it works with a keyboard shortcut, there must be a way to do it programmatically, right?
If someone could figure this out, that would be great!
a user found it! See his comment to see the answer to this part.
I was trying a few more things, and one of them was doing a setTimeout
on the editor.toggleCommentLines()
, and that worked. The timeout worked best if I used 150ms or higher (I started with 2000 just to see if it worked at all, and then slowly moved down).
So the following code works to automatically insert a message and comment it out:
const editor = ace.edit([element]);
editor.setValue([message], 0); // You can also leave the second parameter blank, 0 is the default which automatically selects all.
setTimeout(() => {
editor.toggleCommentLines();
}, 150); // 150ms or more works best
You may also notice that this method clears out 2 methods that I was previously using. There are two reasons for this:
editor.setValue()
it selects all the text.editor
variable, the editor doesn't need to be in "focus".