<template>
<div
class
=
"container"
>
<div
class
=
"row"
>
<div
class
=
"col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2"
>
<textarea
id=
"jsonEvents"
ref=
"jsonEvents"
v-model=
"jsonEvents"
class
=
"form-control"
placeholder=
"Document in JSON format"
spellcheck=
"false"
data-gramm=
"false"
/>
</div>
<div
class
=
"col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2"
>
<textarea
id=
"xmlEvents"
ref=
"xmlEvents"
v-model=
"xmlEvents"
class
=
"form-control"
placeholder=
"Document in XML format"
spellcheck=
"false"
data-gramm=
"false"
/>
</div>
</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/javascript-lint.js"
);
require
(
"codemirror/addon/hint/javascript-hint.js"
);
require
(
"codemirror/addon/display/placeholder.js"
);
}
export
default
{
name:
"Converter"
,
components: {},
data() {
return
{
xmlEvents:
""
,
jsonEvents:
""
,
xmlEditor: null,
jsonEditor: null,
};
},
mounted() {
this.xmlEditor = CodeMirror.fromTextArea(this.
$refs
.xmlEvents, {
mode:
"application/xml"
,
beautify: { initialBeautify: true, autoBeautify: true },
lineNumbers: true,
indentWithTabs: true,
autofocus: true,
tabSize: 2,
gutters: [
"CodeMirror-lint-markers"
],
lint: true,
autoCloseBrackets: true,
autoCloseTags: true,
styleActiveLine: true,
styleActiveSelected: true,
});
this.xmlEditor.setSize(null,
"75vh"
);
this.jsonEditor = CodeMirror.fromTextArea(this.
$refs
.jsonEvents, {
mode:
"applicaton/ld+json"
,
beautify: { initialBeautify: true, autoBeautify: true },
lineNumbers: true,
indentWithTabs: true,
autofocus: true,
tabSize: 2,
gutters: [
"CodeMirror-lint-markers"
],
autoCloseBrackets: true,
autoCloseTags: true,
styleActiveLine: true,
styleActiveSelected: true,
});
this.jsonEditor.setSize(null,
"75vh"
);
for
(
const
s of document.getElementsByClassName(
"CodeMirror"
)) {
s.style.border =
"1px solid black"
;
}
},
};
</script>
<style>
textarea {
height: 75vh;
white-space: nowrap;
resize: both;
border: 1px solid black;
}
.cm-editor .cm-placeholder {
color: red !important;
text-align: center;
line-height: 200px;
}
.CodeMirror-editor pre.CodeMirror-placeholder {
color: red !important;
text-align: center;
line-height: 200px;
}
.CodeMirror-editor .CodeMirror-placeholder {
color: red !important;
text-align: center;
line-height: 200px;
}
</style>