Question

我目前正在使用Vue.js，Vuetify和CodeMirror。我想在Vuetify对话框中使用CodeMirror作为HTML编辑器。

我遇到的问题是第一次加载HTML编辑器后，当我在HTML编辑器中单击时，该行与行号不对齐。下面是我尝试在HTML编辑器中突出显示这两行时的屏幕截图。

如果我开始在HTML编辑器中进行编辑。然后正确计算行高。

所以，我试图找出如何在初始化时正确计算行高。我之前已经遍历了CodeMirror代码，并且有一行导致这种情况发生（稍后将更新问题），但是我不知道它设置行高的原因或补救方法。

这是显示问题的CodePen： https://codepen.io/jgunawan-dc/pen/BPeGzb?editors=1010

<div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-btn color="primary" @click="openDialog">Open Dialog</v-btn>

          <v-dialog v-model="dialog" scrollable content-class="dialog" max-width="600">
            <v-card>
              <v-card-text>
                <div>
                  <div class="grey--text body-1">Body (html)</div>
                  <textarea type="text" v-model="htmlContent" class="htmlEditor"></textarea>
                </div>
              </v-card-text>
            </v-card>
          </v-dialog>
        </v-container>
      </v-content>
    </v-app>
</div>
<script>
new Vue({ 
  el: '#app',
  data: {
    dialog: false,
    htmlContent: `<p>This is a test</p>
<p><strong>2nd paragraph</strong></p>`
  },
  methods: {
    openDialog: function () {
      this.dialog = true;
      this.$nextTick(function () {
        let htmlEl = document.getElementsByClassName('htmlEditor')[0];
        CodeMirror.fromTextArea(htmlEl, {
          fixedGutter: false,
          mode: 'htmlmixed',
          indentUnit: 4,
          indentWithTabs: true,
          lineNumbers: true,
          viewportMargin: Infinity          
        })
      })
    }
  }
})
</script>

CodeMirror初始化时行高不正确

0 个答案: