默认情况下在代码镜像中启动全屏

launch full screen by default in code mirror

本文关键字：启动 镜像 情况下 代码 默认      更新时间：2024-03-17

我想在加载页面时默认启动代码镜像的全屏模式。我安装了插件，F11按键功能运行良好。但是，有没有一个Javascript函数我可以在页面上调用，这样编辑器就可以在全屏模式下打开，而无需用户将光标放在文本区域，然后按下其中一个映射键？

谢谢。

实际上这比你想象的要容易。您不必调用在示例中映射到F11的函数。如果你只在全屏中使用它就足够了，你只需要将css更改为：

style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; width: auto; height: auto; "

这是一个完全有效的例子（就像http://codemirror.net/demo/fullscreen.html但仅全屏）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel=stylesheet href="//codemirror.net/doc/docs.css">
    <link rel=stylesheet href="//codemirror.net/lib/codemirror.css">
    <link rel=stylesheet href="//codemirror.net/theme/night.css">
    <script src="//codemirror.net/lib/codemirror.js"></script>
    <script src="//codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="//codemirror.net/mode/xml/xml.js"></script>
    <style type=text/css>
        .CodeMirror {float: left; width: 100%; height: 100%; }
    </style>  
</head>
<body>
    <div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; width: auto; height: auto; ">
        <textarea id="content" name="content" style="display: none;">&lt;dl&gt;
  &lt;dt id="option_indentWithTabs"&gt;&lt;code&gt;&lt;strong&gt;indentWithTabs&lt;/strong&gt;: boolean&lt;/code&gt;&lt;/dt&gt;
  &lt;dd&gt;Whether, when indenting, the first N*&lt;code&gt;tabSize&lt;/code&gt;
  spaces should be replaced by N tabs. Default is false.&lt;/dd&gt;
  &lt;dt id="option_electricChars"&gt;&lt;code&gt;&lt;strong&gt;electricChars&lt;/strong&gt;: boolean&lt;/code&gt;&lt;/dt&gt;
  &lt;dd&gt;Configures whether the editor should re-indent the current
  line when a character is typed that might change its proper
  indentation (only works if the mode supports indentation).
  Default is true.&lt;/dd&gt;
  &lt;dt id="option_specialChars"&gt;&lt;code&gt;&lt;strong&gt;specialChars&lt;/strong&gt;: RegExp&lt;/code&gt;&lt;/dt&gt;
  &lt;dd&gt;A regular expression used to determine which characters
  should be replaced by a
  special &lt;a href="#option_specialCharPlaceholder"&gt;placeholder&lt;/a&gt;.
  Mostly useful for non-printing special characters. The default
  is &lt;code&gt;/['u0000-'u0019'u00ad'u200b'u2028'u2029'ufeff]/&lt;/code&gt;.&lt;/dd&gt;
  &lt;dt id="option_specialCharPlaceholder"&gt;&lt;code&gt;&lt;strong&gt;specialCharPlaceholder&lt;/strong&gt;: function(char)&nbsp;→&nbsp;Element&lt;/code&gt;&lt;/dt&gt;
  &lt;dd&gt;A function that, given a special character identified by
  the &lt;a href="#option_specialChars"&gt;&lt;code&gt;specialChars&lt;/code&gt;&lt;/a&gt;
  option, produces a DOM node that is used to represent the
  character. By default, a red dot (&lt;span style="color: red"&gt;•&lt;/span&gt;)
  is shown, with a title tooltip to indicate the character code.&lt;/dd&gt;
  &lt;dt id="option_rtlMoveVisually"&gt;&lt;code&gt;&lt;strong&gt;rtlMoveVisually&lt;/strong&gt;: boolean&lt;/code&gt;&lt;/dt&gt;
  &lt;dd&gt;Determines whether horizontal cursor movement through
  right-to-left (Arabic, Hebrew) text is visual (pressing the left
  arrow moves the cursor left) or logical (pressing the left arrow
  moves to the next lower index in the string, which is visually
  right in right-to-left text). The default is &lt;code&gt;false&lt;/code&gt;
  on Windows, and &lt;code&gt;true&lt;/code&gt; on other platforms.&lt;/dd&gt;
&lt;/dl&gt;
</textarea>      
    </div>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        mode: 'application/xml',
        lineNumbers: true,
        theme: "night"
      });
    </script>
  </body>
</html>

只有一行：

 editor.setSize(window.screen.width,window.screen.height);
相关文章：