Search code examples
codemirror

How do i activate the fullscreen addon in codemirror?


The documentation for CodeMirrors fullscreen mode seems to be a bit sparse. For example how do i tell it to listen for keys to activate fullscreen? or how can i use a button to toggle fullscreen?

For benefit to others bellow is the solution i found.


Solution

  • This will get the option value:

     editor.getOption("fullScreen")
    

    This will set the option fullscreen to true:

    editor.setOption("fullScreen", true)
    

    (editor is the instance you instantiated) This is a working example of instantiating a new CodeMirror object written in coffeescript:

    $(document).ready ->
        editor = CodeMirror.fromTextArea(code_area,
            name: 'htmlmixed'
            htmlMode: true
            theme: 'default'
            lineNumbers: true
            indentUnit: 4
            keyMap: 'sublime'
            extraKeys: 
                "Ctrl-Enter": (cm) ->
                    cm.setOption "fullScreen", !cm.getOption("fullScreen")
                    return
    
                Esc: (cm) ->
                    cm.setOption "fullScreen", false
                    return
        )
    

    Based on this javascript:

       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
          lineNumbers: true,
          theme: "night",
          extraKeys: {
            "F11": function(cm) {
              cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            },
            "Esc": function(cm) {
              if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
            }
          }
        });
    

    Taken from here: https://github.com/marijnh/CodeMirror/blob/master/demo/fullscreen.html