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
Change Height and Width of TextArea in codemirror
提问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 height
is 300px
in codemirror.css
. How to change Height and Width of TextArea programmatically in codemirror?
我正在开发具有 xml、java 程序的网站。所以我选择了 CodeMirror 在 TextArea 中显示程序。我已经成功显示了。它的默认height
值300px
在codemirror.css
. 如何在代码镜像中以编程方式更改 TextArea 的高度和宽度?
回答by Christian
The CodeMirror user manual is your friend.
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 以指示不应更改该维度。
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
height
style toauto
and giving theviewportMargin
a value ofInfinity
, CodeMirror can be made to automatically resize to fit its content.
通过将编辑器的
height
样式设置为auto
并赋予viewportMargin
值Infinity
,可以使 CodeMirror 自动调整大小以适应其内容。
回答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%");