Vue集成Monaco Editor点击获取内容后页面冻结问题求助

问题现象 #

基于Vue.js与Monaco Editor开发的应用，点击按钮执行this.result = this.editor.getValue()获取编辑器内容时，页面完全冻结，无法打开调试工具。

根因分析 #

页面冻结的核心原因是textarea高度未做限制：

• textarea设置了flex-grow: 1但未定义固定高度或最大高度
• 当编辑器内容较多时，textarea会无限制拉伸高度，触发浏览器大量重绘重排操作，最终导致页面卡死

修复方案 #

给result-field类添加固定高度和滚动属性，限制textarea的高度范围，避免无限扩展：

.result-field {
  flex-grow: 1;
  margin-left: 10px;
  height: 500px; /* 设置与编辑器一致的固定高度 */
  overflow: auto; /* 内容过多时显示滚动条 */
}

额外优化：调整template结构，将按钮放入container内，保持布局结构统一。

修改后的完整代码 #

<template>
  <div class="container">
    <div class="editor-container" ref="editorContainer"></div>
    <textarea v-if="showResult" class="result-field" v-model="result" readonly></textarea>
    <button @click="logContent">Spustit</button>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor'

export default {
  name: 'MonacoEditor',
  data () {
    return {
      editor: null,
      code: '',
      result: '',
      showResult: false
    }
  },
  mounted () {
    this.editor = monaco.editor.create(this.$refs.editorContainer, {
      value: this.code,
      language: 'javascript',
      theme: 'vs'
    })
  },
  methods: {
    logContent () {
      this.result = this.editor.getValue()
      this.showResult = true
    }
  },
  beforeUnmount () {
    if (this.editor) {
      this.editor.dispose()
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}

.editor-container {
  width: 100%;
  height: 500px;
  border: 1px solid black;
  margin-bottom: 10px;
}

.result-field {
  flex-grow: 1;
  margin-bottom: 10px;
  height: 500px;
  overflow: auto;
}

button {
  cursor: pointer;
  align-self: flex-start;
}
</style>

内容的提问来源于stack exchange，提问作者Mandarin Frank