# power-document-editor

**Repository Path**: knoxZhang/power-document-editor

## Basic Information

- **Project Name**: power-document-editor
- **Description**: Vue2 ooffice组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-12
- **Last Updated**: 2024-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# document-editor-vue

## 基于 Vue 2.x 组件

## 安装
```
npm install --save document-editor-vue
```

```
<template>
  <div id="app">
    <div style="height: calc(100vh - 0px); flex: 1">
      <DocumentEditor
        ref="Editor"
        id="test"
        :config="config"
        :documentServerUrl="documentServerUrl"
        @DocumentReady="DocumentReady"
        @DocumentStateChange="DocumentStateChange"
        @RequestCustomEvents="RequestCustomEvents"
      />
    </div>
  </div>
</template>

<script>
import { DocumentEditor } from "document-editor-vue";

export default {
  name: "App",
  components: { DocumentEditor },
  data() {
    return {
      ccList: [],
      documentServerUrl:
        "http://10.10.31.157:7008/web-apps/apps/api/documents/api.js",
      config: {
        document: {
          fileType: "docx",
          info: {
            favorite: null,
          },
          key: "333333",
          permissions: {
            comment: true,
            download: true,
            edit: true,
            fillForms: true,
            modifyContentControl: true,
            modifyFilter: true,
            print: false,
            review: true,
            reviewGroups: null,
          },
          title: "demo.docx",
          url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/demo.docx",
          urlUser: null,
        },
        documentType: "word",
        editorConfig: {
          callbackUrl: null,
          customization: {
            forcesave: false,
            goback: {
              url: null,
            },
            hideRightMenu: true,
            hideRulers: true,
            zoom: 100,
            plugins: false,
          },
          lang: "zh",
          mode: "edit",
          user: {
            group: null,
            id: "lcTest",
            name: "lcTest",
          },
        },
        token: "",
        type: "desktop",
        height: "100%",
        width: "100%",
      },
    };
  },
  methods: {
    DocumentReady() {
      console.log("文件加载完成");
    },
    DocumentStateChange() {
      console.log("文件变化");
    }
  },
};
</script>

<style>
body {
  margin: 0 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 0;
}
</style>
```