CodeMirror CSS only allow edit inside class/id

Question

I want to use CodeMirror for CSS editing and let the user only allow to edit the styles inside the classes or id's.

Basically what I want to accomplish is that there is only one single class inside the editor.

The first line is the classname and the last line is the closing }. All lines between this can be changed by the user.

Example:

.myclass { /* not editable */
    /* the user can change anything here, add lines and so on */
} /* last line, not editable and no more lines can be inserted afterwards*/

The reason for doing this is that the user should not be able to change the classname and that the highlighting is not working well if there is no correct syntax inside the editor.

I know that he could close it inside the class with } and open a new class/id, but that does not matter in my case.

Thanks in advance!

Answer 1

You can call markText (docs) with the readOnly option to disallow editing in a part of the document. Make sure set the inclusiveLeft option on the text at the start, and inclusiveRight at the end, in order to prevent inserting of content before/after the opening/closing code.