Codemirror + Validation ( JSON / XML )

Work in progress...
This project is created to help us validate XML or JSON scheme inside of Codemirror plugin.

Feat

• Validate XML
• Validate JSON
• Export errors as a file

Installation

1npm i codemirror-editor-vue3-knowit-vite

Set it as global component

1import CodeEditor from "codemirror-editor-vue3-knowit-vite"
2import "codemirror-editor-vue3-knowit-vite/dist/style.css"
3
4const app = createApp(App);
5app.use(CodeEditor)
6app.mount('#app')

Example of invalid XML

1<template>
2  <code-editor :type="type" :content="content"></code-editor>
3</template>
4
5<script>
6
7export default {
8  data() {
9    return {
10      type: 'xml',
11      content: `<?xml version="1.0" encoding="UTF-8" ?>
12      <Partners>
13        <Partner>
14          <Nam>ldMsyR</Name>
15          <Address>Test Adresa</Address>
16          <BankAccount>000000000000963289</BankAccount>
17          <Comment>Test Komentar</Comment>
18        </Partner>
19      </Partners><Partners>
20        <Partner>
21          <Nam>ldMsyR</Name>
22          <Address>Test Adresa</Address>
23          <BankAccount>000000000000963289</BankAccount>
24          <Comment>Test Komentar</Comment>
25        </Partner>
26      </Partners><Partners>
27        <Partner>
28          <Nam>ldMsyR</Name>
29          <Address>Test Adresa</Address>
30          <BankAccount>000000000000963289</BankAccount>
31          <Comment>Test Komentar</Comment>
32        </Partner>
33      </Partners><Partners>
34        <Partner>
35          <Nam>ldMsyR</Name>
36          <Address>Test Adresa</Address>
37          <BankAccount>000000000000963289</BankAccount>
38          <Comment>Test Komentar</Comment>
39        </Partner>
40      </Partners><Partners>
41        <Partner>
42          <Nam>ldMsyR</Name>
43          <Address>Test Adresa</Address>
44          <BankAccount>000000000000963289</BankAccount>
45          <Comment>Test Komentar</Comment>
46        </Partner>
47      </Partners><Partners>
48        <Partner>
49          <Nam>ldMsyR</Name>
50          <Address>Test Adresa</Address>
51          <BankAccount>000000000000963289</BankAccount>
52          <Comment>Test Komentar</Comment>
53        </Partner>
54      </Partners><Partners>
55        <Partner>
56          <Nam>ldMsyR</Name>
57          <Address>Test Adresa</Address>
58          <BankAccount>000000000000963289</BankAccount>
59          <Comment>Test Komentar</Comment>
60        </Partner>
61      </Partners>`,
62      schemaUrl: ''
63    };
64  },
65};
66</script>

TODO:

• Translation XML (СРБ - ENG)
• Translation JSON (СРБ - ENG)

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).