vue-xml

XML编辑器组件库，用于编辑和管理XML格式的文档内容。

安装

npm install @xilonglab/vue-xml

使用

作为组件使用

<template>
  <XlXmlEditor 
    v-model="xmlContent"
    :auto-saver-state="autoSaverState"
    :template-id="templateId"
    @export="handleExport"
  />
</template>

<script setup>
import { XlXmlEditor } from '@xilonglab/vue-xml'

const xmlContent = ref('')
const autoSaverState = ref({})
const templateId = ref(null)

const handleExport = () => {
  // 处理导出逻辑
}
</script>

作为插件安装

import { createApp } from 'vue'
import XlXmlEditor from '@xilonglab/vue-xml'

const app = createApp(App)
app.use(XlXmlEditor)

组件说明

XlXmlEditor

主要的XML编辑器组件。

Props

• modelValue (String): XML内容，支持 v-model
• autoSaverState (Object): 自动保存状态对象
• templateId (String|Number): 模板ID

Events

• update:modelValue: 当XML内容更新时触发
• export: 当点击导出按钮时触发

模块说明

核心模块 (core/)

BaseEditor.js

基础编辑器类，提供编辑器的基础功能和状态管理。

解析器模块 (parsers/)

XmlParser.js

负责XML字符串的解析和处理。

管理器模块 (managers/)

TagManager.js

管理标签的增删改查操作。

FormattingManager.js

处理文本格式化相关功能。

ConditionManager.js

处理XML标签的条件属性。

编辑器类

Editor.js

整合所有功能模块，提供完整的编辑器功能。

导出

// 组件
import { XlXmlEditor } from '@xilonglab/vue-xml'

// 编辑器类
import { XmlEditor } from '@xilonglab/vue-xml'

// 核心模块
import { BaseEditor } from '@xilonglab/vue-xml'

// 解析器
import { XmlParser } from '@xilonglab/vue-xml'

// 管理器
import { TagManager, FormattingManager, ConditionManager } from '@xilonglab/vue-xml'

依赖

• element-plus: 2.3.6