如何使用 CodeMirror Lint 中的 lint 突出显示语法错误并删除 CodeMirror 以制作正常的 textarea

Question

我有一个Nuxtjs/Vuejs 应用程序，其中我有2 个textarea。一个用于XML，另一个用于JSON。如果XML/JSON 中存在语法错误，我想针对特定行突出显示语法错误，并向用户显示消息。像这样：ErrorHighlighting Link

我尝试在我的Nuxtjs/Vuejs 应用程序中实现它，但无法正常工作，并且我收到基于JSHINT 的错误，因为它没有被导入。有人可以帮助我如何在CodeMirror 处理的文本区域中为XML 和JSON 显示错误消息。

另外，如果我想从我的textarea 中删除CodeMirror 美化，如果用户在我的应用程序中单击reset 按钮，那么textarea 将变为正常textarea 而不是CodeError 处理区域。我尝试了answers from here，但似乎没有什么对我有用。

我已创建CodeSandbox，请查看并提供您的建议：https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue

Answer 1

我终于找到了解决办法。

要删除CodeMirror，我们可以这样做：

      this.xmlEditor.toTextArea()
      this.xmlEditor = null

或进行一些验证，然后重置值：

      if (this.xmlEditor !== null) {
        document.getElementById('xml').value = ''
        this.xmlEditor.setValue('')
        this.xmlEditor.toTextArea()
        this.xmlEditor = null
      }

为了美化和显示语法错误，我使用的是这样的：

<template>
  <div>
    CODE MIRROR
    <div class="row">
      <div class="col-sm-3">
        <button class="btn btn-primary" @click="resetArea">
          Reset
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1" />
      <div class="col-md-5">
        <div class="row">
          <div class="col-md-12" style="display: flex">
            <textarea
              id="xml"
              v-model="xmlInput"
              class="form-control"
              placeholder="XML Document"
              spellcheck="false"
              data-gramm="false"
              @input="convertToJSON()"
            />
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="row">
          <div class="col-md-12">
            <textarea
              id="json"
              v-model="jsonInput"
              class="form-control"
              placeholder="JSON Document"
              spellcheck="false"
              data-gramm="false"
              @input="convertToXML()"
            />
          </div>
        </div>
      </div>
      <div class="col-md-1" />
    </div>
  </div>
</template>

<script>
let CodeMirror = null
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
  CodeMirror = require('codemirror')
  require('codemirror/mode/xml/xml.js')
  require('codemirror/mode/javascript/javascript.js')
  require('codemirror/lib/codemirror.css')
  require('codemirror/addon/lint/lint.js')
  require('codemirror/addon/lint/lint.css')
  require('codemirror/addon/lint/json-lint')
  require('codemirror/addon/lint/javascript-lint.js')
  require('codemirror/addon/hint/javascript-hint.js')
  window.jsonlint = require('jsonlint-mod')
}

export default {
  data () {
    return {
      xmlInput: '',
      jsonInput: '',
      xmlEditor: null,
      jsonEditor: null
    }
  },
  mounted () {},
  methods: {
    convertToJSON () {
      // Make the textarea as CodeMirror beautified XML
      if (this.xmlEditor === null) {
        this.xmlEditor = CodeMirror.fromTextArea(document.getElementById('xml'), {
          mode: 'application/xml',
          lineNumbers: true,
          indentWithTabs: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true,
          autoCloseBrackets: true,
          autoCloseTags: true
        })

        this.xmlEditor.setValue(document.getElementById('xml').value)
      } else {
        this.xmlEditor.setValue(document.getElementById('xml').value)
      }
    },
    convertToXML () {
      // Make the textarea as CodeMirror beautified JSON
      if (this.jsonEditor === null) {
        this.jsonEditor = CodeMirror.fromTextArea(document.getElementById('json'), {
          mode: 'applicaton/ld+json',
          lineNumbers: true,
          lineWrapping: true,
          autoCloseBrackets: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true
        })
        this.jsonEditor.setValue(document.getElementById('json').value)
      } else {
        this.jsonEditor.setValue(document.getElementById('json').value)
      }
    },
    resetArea () {
      // Remove the CodeMirror and make it normal textarea
      if (this.xmlEditor !== null) {
        document.getElementById('xml').value = ''
        this.xmlEditor.setValue('')
        this.xmlEditor.toTextArea()
        this.xmlEditor = null
      }

      if (this.jsonEditor !== null) {
        document.getElementById('json').value = ''
        this.jsonEditor.setValue('')
        this.jsonEditor.toTextArea()
        this.jsonEditor = null
      }
    }
  }
}
</script>

<style scoped>
textarea {
  height: 78vh;
  white-space: nowrap;
  resize: both;
}

::-webkit-input-placeholder {
  color: #f1948a;
  text-align: center;
}

.CodeMirror {
  height: 78vh !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid black;
}
</style>