如何使用CodeMirror Lint中的lint突出显示语法错误并删除CodeMirror以使文本区正常 [英] How to highlight the Syntax error using the lint in CodeMirror Lint and remove the CodeMirror to make normal textarea

问题描述

我有一个Nuxtjs/Vuejs应用程序，其中我有2textarea。一个用于XML，另一个用于JSON。我想突出显示XML/JSON中与特定行相对的语法错误，并向用户显示消息。如下所示：ErrorHighlighting Link

我尝试在我的Nuxtjs/Vuejs应用程序中实现它，但不能正常工作，并且我收到了一个基于JSHINT的错误，因为它没有导入。有人能告诉我如何在XML和JSON的CodeMirror处理的文本区域内的特定行上显示错误消息吗？

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

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

推荐答案

我终于找到了解决方案。

要删除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>

这篇关于如何使用CodeMirror Lint中的lint突出显示语法错误并删除CodeMirror以使文本区正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！