33

我正在开发具有 xml、java 程序的网站。所以我选择 CodeMirror 在 TextArea 中显示程序。我已经成功展示了。它的默认height值300px在codemirror.css. 如何在 codemirror 中以编程方式更改 TextArea 的高度和宽度？

4

8 回答 8

65

CodeMirror 用户手册是您的朋友。

示例代码：

<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>
于 2012-09-10T10:22:45.290 回答
22 
myCodeMirror.setSize(null, 500);

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

文档：

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

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

于 2017-07-06T16:22:49.467 回答
16

尽管克里斯蒂安的回答很好，但请注意：

自动调整大小演示。

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

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

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

于 2016-06-23T19:49:08.763 回答
3

作为正确答案的延伸：

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

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

于 2019-01-25T15:32:29.347 回答
1

如果你在反应使用中这样做ref

const codemirrorRef = React.useRef();

React.useEffect(() => {
  const current = codemirrorRef.current.editor.display.wrapper.style.height = "1000px";
});

<CodeMirror
    [...]           
    ref={codemirrorRef}
/>

codemirrorRef.current.editor.display.wrapper包含 div 元素。从那里你可以做任何你想做的事情document.getElementById('#id')

于 2020-12-16T17:29:47.057 回答
1 
<script>
 $(function () {
   // CodeMirror
   CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
      lineNumbers: true,
      readOnly: true,
      //mode: "htmlmixed",
   }).setSize("100%", 610);
 })
</script>
于 2021-06-25T23:02:10.180 回答
0

我使用了上面的解决方案，但是当一行太长然后它打破了包装并破坏了布局时，我总是在这个选项上苦苦挣扎。我不想使用 lineBreak 选项，所以我定义了以下内容：

<div class="container">
  <textarea id="codemirror">
</div>

风格如下：

.container {
  position: relative;
  height: {as you want}
  width: 100%;
}

#codemirror {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
于 2021-03-02T15:00:26.847 回答
0

如果您在 Angular 应用程序中使用 ngx-codemirror 包，下面的博客将对您非常有用

https://devsuhas.com/2021/04/06/change-height-and-width-of-textarea-in-codemirror/

于 2021-04-11T11:13:06.720 回答