Question

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

Answer 1

The CodeMirror user manual is your friend.

示例代码：

<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>

Answer 2

myCodeMirror.setSize(null, 500);

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

Documentation:

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

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

Answer 3

虽然克里斯蒂安的答案很棒，但只是提醒：

自动化演示。

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

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

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

Answer 4

扩展为正确答案：

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

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

Answer 5

如果您是在反应中使用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')

Answer 6

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

Skin

风格如下：

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

Answer 7

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

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

Answer 8

<script>
function generateRandomArray(array){
if(typeof array != 'array'){
console.log("Uncaught typeError: the argument is not a array");
}
var storage = Math.floor(Math.random() * array.length);
return array[storage];
}
var arrayer = generateRandomArray('d');
console.log(arrayer );
</script>

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

8 个答案: