Javascript 更改codemirror中TextArea的高度和宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12349529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:46:58  来源:igfitidea点击:

Change Height and Width of TextArea in codemirror

javascript

提问by selva_pollachi

I am developing website which having xml, java programs. So i chose CodeMirror for displaying programs in TextArea. I had successfully displayed. It's default heightis 300pxin codemirror.css. How to change Height and Width of TextArea programmatically in codemirror?

我正在开发具有 xml、java 程序的网站。所以我选择了 CodeMirror 在 TextArea 中显示程序。我已经成功显示了。它的默认height300pxcodemirror.css. 如何在代码镜像中以编程方式更改 TextArea 的高度和宽度?

回答by Christian

The CodeMirror user manual is your friend.

CodeMirror 用户手册是您的朋友。

Example code:

示例代码:

<textarea id="myText" rows="4" cols="10"></textarea>

<script type="text/javascript" language="javascript">
    var myTextArea = document.getElementById('myText');
    var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
    myCodeMirror.setSize(500, 300);
</script>

回答by YourAboutMeIsBlank

myCodeMirror.setSize(null, 500);

You can pass null for either of them to indicate that that dimension should not be changed.

您可以为它们中的任何一个传递 null 以指示不应更改该维度。

Documentation:

文档:

cm.setSize(width: number|string, height: number|string)

Programmatically set the size of the editor (overriding the applicable CSS rules). width and height can be either numbers (interpreted as pixels) or CSS units ("100%", for example). You can pass null for either of them to indicate that that dimension should not be changed.

以编程方式设置编辑器的大小(覆盖适用的 CSS 规则)。宽度和高度可以是数字(解释为像素)或 CSS 单位(例如“100%”)。您可以为它们中的任何一个传递 null 以指示不应更改该维度。

回答by KhoPhi

Although the answer from Christian is great, just a heads up:

尽管 Christian 的回答很棒,但请注意:

Autoresize Demo.

自动调整演示。

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}

By setting an editor's heightstyle to autoand giving the viewportMargina value of Infinity, CodeMirror can be made to automatically resize to fit its content.

通过将编辑器的height样式设置为auto并赋予viewportMarginInfinity,可以使 CodeMirror 自动调整大小以适应其内容。

Source: https://codemirror.net/demo/resize.html

来源:https: //codemirror.net/demo/resize.html

回答by pme

As an extention to the correct answer:

作为正确答案的延伸:

If you want that it takes the whole size of the Parent element, you can use:

如果您希望它占用 Parent 元素的整个大小,您可以使用:

myCodeMirror.setSize("100%", "100%");

myCodeMirror.setSize("100%", "100%");