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

问题描述 投票：2回答：2

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

谢谢，我想启动全屏模式。

javascript codemirror
2个回答
0
投票

其实这比你想象的要简单。你不需要调用例子中被映射到F11的函数。如果你想让它只在全屏状态下运行，你只需要把css改为。

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

这是一个完全可行的例子 (就像这样) http:/codemirror.netdemofullscreen.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>
0
投票

只有一行:

 editor.setSize(window.screen.width,window.screen.height);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.