CodeMirror неверная высота строки при инициализации - PullRequest
Новая
       9

CodeMirror неверная высота строки при инициализации

0 голосов
/ 28 августа 2018

В настоящее время я работаю с Vue.js, Vuetify и CodeMirror. Я хочу использовать CodeMirror внутри диалога Vuetify в качестве редактора HTML.

Проблема, которая возникает у меня после первой загрузки редактора HTML, когда я щелкаю в редакторе HTML, строка не совпадает с номером строки. Ниже приведен скриншот, когда я пытался выделить обе строки в редакторе HTML.

incorrect row height screenshot

Если я начну редактировать в редакторе HTML. Высота строки тогда правильно рассчитана.

correct row height screenshot

Итак, я пытаюсь выяснить, как правильно рассчитать высоту строки при инициализации. Я прошел через код 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>
...