Question

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.

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top