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

我想在加载页面时默认启动代码镜像的全屏模式。我安装了插件并且 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>

关于javascript - 默认情况下在代码镜像中启动全屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20404053/

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

上一篇：javascript - d3js :The xaxis time is not showing the complete date value

下一篇：javascript - 如何从 select2 组合中的 id 中获取名称？