95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div ref="editor" style="text-align:left"></div>
|
|
<button @click="exportToXml">导出为XML</button>
|
|
<input type="file" accept=".xml" @change="handleXmlUpload">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import E from 'wangeditor';
|
|
import { js2xml, xml2js } from 'xml-js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
editor: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.editor = new E(this.$refs.editor);
|
|
this.editor.create();
|
|
},
|
|
methods: {
|
|
convertHtmlToXml(htmlContent) {
|
|
const xmlObject = {
|
|
declaration: {
|
|
attributes: {
|
|
version: '1.0',
|
|
encoding: 'UTF-8'
|
|
}
|
|
},
|
|
elements: [{
|
|
type: 'element',
|
|
name: 'richText',
|
|
elements: [{
|
|
type: 'text',
|
|
text: htmlContent
|
|
}]
|
|
}]
|
|
};
|
|
|
|
return js2xml(xmlObject, { compact: false, spaces: 4 });
|
|
},
|
|
|
|
downloadXml(content, fileName = 'content.xml') {
|
|
const blob = new Blob([content], { type: 'application/xml' });
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = fileName;
|
|
link.click();
|
|
URL.revokeObjectURL(link.href);
|
|
},
|
|
|
|
exportToXml() {
|
|
const html = this.editor.txt.html();
|
|
const xml = this.convertHtmlToXml(html);
|
|
this.downloadXml(xml);
|
|
},
|
|
|
|
parseXmlToHtml(xmlString) {
|
|
try {
|
|
const result = xml2js(xmlString, { compact: false });
|
|
const richTextElement = result.elements.find(el => el.name === 'richText');
|
|
if (richTextElement && richTextElement.elements && richTextElement.elements.length > 0) {
|
|
return richTextElement.elements[0].text;
|
|
}
|
|
return '';
|
|
} catch (e) {
|
|
console.error('XML解析错误:', e);
|
|
return '';
|
|
}
|
|
},
|
|
|
|
handleXmlUpload(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const xmlString = e.target.result;
|
|
const html = this.parseXmlToHtml(xmlString);
|
|
if (html) {
|
|
this.editor.txt.html(html);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
if (this.editor) {
|
|
this.editor.destroy();
|
|
}
|
|
}
|
|
};
|
|
</script> |