@xilonglab/vue-xml-editor

一个基于 Vue3 和 Tiptap 的 XML 文档编辑器组件。

功能特性

• 📝 丰富的文档编辑功能
• 📄 支持分页显示
• 🎨 丰富的富文本编辑功能
• 📋 支持多种节点类型插入
• 🛠️ 实用的编辑工具
• 🎨 支持页面样式设置
• 📤 支持多种格式导出
• 🖨️ 支持打印和打印预览
• 🔧 支持块级文档编辑
• 🧩 支持添加自定义扩展
• 🌍 支持多语言设置
• 🌓 支持主题自定义

安装

npm install @xilonglab/vue-xml-editor

使用

基本用法

<template>
  <div>
    <XlXmlEditor
      v-model="content"
      height="600px"
      :options="editorOptions"
    />
  </div>
</template>

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

const content = ref('<h1>Hello World</h1><p>欢迎使用 XML 编辑器！</p>')

const editorOptions = ref({
  // 编辑器配置选项
  toolbar: {
    mode: 'classic', // 'classic' | 'ribbon'
    menus: ['base', 'insert', 'table', 'page', 'export']
  },
  page: {
    layout: 'page', // 'page'
    size: { width: 21, height: 29.7 }, // A4 纸大小 (cm)
    margin: { top: 2.54, right: 2.54, bottom: 2.54, left: 2.54 }
  },
  document: {
    enableSpellcheck: true,
    readOnly: false
  }
})
</script>

高级配置

<template>
  <XlXmlEditor
    v-model="content"
    :options="editorOptions"
    @changed="handleContentChange"
    @saved="handleSave"
    @print="handlePrint"
  />
</template>

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

const content = ref('')

const editorOptions = ref({
  // 工具栏配置
  toolbar: {
    mode: 'ribbon',
    menus: ['base', 'insert', 'table', 'page', 'export'],
    enableMinimap: false
  },

  // 页面配置
  page: {
    layout: 'page',
    size: { width: 21, height: 29.7 }, // A4
    orientation: 'portrait', // 'portrait' | 'landscape'
    background: '#ffffff',
    margin: { top: 2.5, right: 2.5, bottom: 2.5, left: 2.5 },
    showBreakMarks: true,
    showLineNumber: false
  },

  // 文档配置
  document: {
    title: '我的文档',
    enableSpellcheck: true,
    enableBubbleMenu: true,
    enableBlockMenu: true,
    readOnly: false,
    autofocus: true,
    characterLimit: 0,
    placeholder: '请输入文档内容...'
  },

  // 功能配置
  file: {
    maxSize: 10 * 1024 * 1024, // 10MB
    acceptTypes: ['image/*', '.pdf', '.docx'],
    uploadUrl: '/api/upload',
    onDelete: (id, url) => {
      // 文件删除处理
    }
  },

  // 主题配置
  theme: 'light', // 'light' | 'dark'

  // 多语言配置
  locale: 'zh-CN', // 'zh-CN' | 'en-US'

  // 自定义配置
  customConfig: {
    // 你的自定义配置
  }
})

const handleContentChange = (data) => {
  console.log('内容变化:', data)
}

const handleSave = async (data) => {
  console.log('保存内容:', data)
  // 实现保存逻辑
}

const handlePrint = () => {
  console.log('打印文档')
}
</script>

API

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | '' | 编辑器内容（双向绑定） | | height | string | '100%' | 编辑器高度 | | options | object | {} | 编辑器配置选项 |

Options 配置

toolbar 工具栏配置

• mode: 工具栏模式 - 'classic' (经典) 或 'ribbon' (功能区)
• menus: 显示的菜单数组

page 页面配置

• layout: 布局模式 - 'page' (分页)
• size: 页面尺寸 { width: number, height: number } (厘米)
• orientation: 页面方向 - 'portrait' (纵向) 或 'landscape' (横向)
• margin: 页边距 { top, right, bottom, left } (厘米)
• background: 页面背景颜色

document 文档配置

• enableSpellcheck: 是否启用拼写检查
• enableBubbleMenu: 是否启用气泡菜单
• enableBlockMenu: 是否启用块菜单
• readOnly: 是否只读模式

Events

| 事件 | 参数 | 说明 | |------|------|------| | update:modelValue | value | 内容变化时触发 | | changed | data | 编辑器内容变化 | | created | - | 编辑器创建完成 | | saved | data | 保存文档时触发 | | print | - | 打印文档时触发 | | focus | - | 编辑器获得焦点 | | blur | - | 编辑器失去焦点 |

样式导入

// 导入样式
import '@xilonglab/vue-xml-editor/style'

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run check:types

# 代码格式化
npm run format

许可证

MIT

支持

如有问题，请提交 Issues。