canvas-editor-toolbar

Canvas Editor Toolbar

一个基于@hufe921/canvas-editor的富文本编辑器工具栏组件，为Vue 3应用提供丰富的文本编辑功能。

功能特点

• 完整的文本格式化工具（加粗、斜体、下划线、删除线等）
• 段落样式设置（对齐方式、行间距、列表等）
• 字体样式管理（字体、字号、颜色等）
• 插入功能（图片、超链接、LaTeX公式等）
• 自动保存和导出为Word文档
• 响应式设计，支持移动设备

安装

npm install canvas-editor-toolbar

使用方法

<template>
  <div class="editor-container">
    <EditorToolbar :editor="editor" @save="handleSave" />
    <div ref="editorContainer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CanvasEditor from '@hufe921/canvas-editor'
import { EditorToolbar } from 'canvas-editor-toolbar'

const editorContainer = ref(null)
const editor = ref(null)

onMounted(() => {
  if (editorContainer.value) {
    editor.value = new CanvasEditor(
      editorContainer.value,
      { main: [] },
      {
        defaultType: 'canvas',
        defaultFont: 'Microsoft YaHei',
        defaultSize: 16
      }
    )
  }
})

const handleSave = (content) => {
  console.log('保存内容:', content)
  // 处理保存逻辑
}
</script>

API

Props

属性名	类型	说明
editor	Editor	Canvas Editor实例，必须传入

Events

事件名	参数	说明
save	content	当用户点击保存按钮时触发，返回编辑器内容

依赖项

• Vue 3
• Element Plus
• @hufe921/canvas-editor

许可证

MIT