打包流程

• 发布ppt-editor版本命令 sh/bash publish.sh
• 发布单独离屏渲染 npm run build:render

组件使用方法

使用依赖包来管理

// package.json
"inscode-ppt-sdk": "git+ssh://[email protected]:InsCode/ppt-editor.git#v0.0.1"

npm install
// 遇到失败检查是否有权限
// 执行 ssh -T [email protected] 的作用是测试你的 SSH 连接是否成功，并验证你的 SSH 公钥是否被 gitcode.com 认可

代码结构

<template>
  <InsCodePPTSdk
    ref="pptRef"
    :loading="loading"
    @change-file="handleChangeFile"
    @change-page="handleChangePage"
    @render="handleRenderStatus"
  >
    <template #toolbarLeft>
      <div >
        toggle
      </div>
    </template>
    <template #toolbarRight>
      版本管理
    </template>
  </InsCodePPTSdk>
</template>
<scrip lang="ts" setup>
import { ref, type Ref } from 'vue';
import InsCodePPTSdk from 'inscode-ppt-sdk';
import 'inscode-ppt-sdk/dist/inscode-ppt-sdk.css'
// generate的时候需要设置为true，默认是false
const loading = ref(true)
// 文件更新
function handleChangeFile (params) {
  const { status, fsPath, content } = params
  // status: delete|new|update
  // fsPath: 文件名字
  // content: 文件内容
}
// 切换ppt的时候
function handleChangePage(params) {
  const { fsPath, content } = params
  // fsPath: 文件名字
  // content: 文件内容
}
// 渲染成功或失败
function handleRenderStatus(params) {
  const { fsPath, status } = params
  // status: success|error
}
// 获取ppt内容
pptRef.value?.get(fsPath, params = {})
// 生成ppt内容 schema协议todo
pptRef.value?.generate(fsPath, params = {})
/**
 * fsPath: String 文件路径
 * params: Object => { content: String } & Record<String, any>
*/
// 直接渲染 ppt内容
pptRef.value?.render([Object, ...])
/**
 * Object: { fsPath: String, content: String } & Record<String, any>
*/
// update单个文件内容
pptRef.value?.update(fsPath, { content: string })
// 获取当前打开的单个ppt

pptRef.value?.getActiveItem()
// 删除某个ppt
pptRef.value?.deleteItem(fsPath:string)
// 打开全屏
pptRef.value?.openFullscreen()

// 设置某个ppt成为编辑中的状态
pptRef.value?.setItemEditing(fsPath, true)

项目说明

• sh publish.sh
• src/pdf,src/render.html 本地测试离屏截图pdf使用
• src/example 本地测试ppt-editor使用
• src/package 所有的编辑器代码实现
• src/package/index.vue 入口文件
• src/package/component 编辑器组件
• src/package/echarts src/package/ui 是ppt渲染器渲染组件
• src/package/taiwind 直接导入所有taiwind3.4.16所有css，渲染器是动态渲染不能直接生成taiwindcss
• src/package/platform 平台工具方法
• src/package/composable vue的composition函数