codemirror-editor-vue3-knowit-vite
v0.0.87
Published
**Work in progress...** <br /> This project is created to help us validate XML or JSON scheme inside of Codemirror plugin.
Downloads
56
Readme
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
npm i codemirror-editor-vue3-knowit-vite
Set it as global component
import CodeEditor from "codemirror-editor-vue3-knowit-vite"
import "codemirror-editor-vue3-knowit-vite/dist/style.css"
const app = createApp(App);
app.use(CodeEditor)
app.mount('#app')
Example of invalid XML
<template>
<code-editor :type="type" :content="content"></code-editor>
</template>
<script>
export default {
data() {
return {
type: 'xml',
content: `<?xml version="1.0" encoding="UTF-8" ?>
<Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners><Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners><Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners><Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners><Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners><Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners><Partners>
<Partner>
<Nam>ldMsyR</Name>
<Address>Test Adresa</Address>
<BankAccount>000000000000963289</BankAccount>
<Comment>Test Komentar</Comment>
</Partner>
</Partners>`,
schemaUrl: ''
};
},
};
</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).