React

安装

npm install --save @onlyoffice/document-editor-react

or

yarn add @onlyoffice/document-editor-react -S

使用示例

import { DocumentEditor } from "@onlyoffice/document-editor-react";
var onDocumentReady = function (event) {
    console.log("Document is loaded");
};

<DocumentEditor
  id="docxEditor"
  documentServerUrl="http://documentserver/"
  config={{
      "document": {
          "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "https://example.com/url-to-example-document.docx"
    },
    "documentType": "word",
    "editorConfig": {
        "callbackUrl": "https://example.com/url-to-callback.ashx"
    }
  }}
  events_onDocumentReady={onDocumentReady} />

Props

名 称
类 型
默 认
必 填
描 述
id string null true 组件唯一标识
documentServerUrl string null true 文档服务器地址
config object null true 用于打开带有token的文件的通用配置对象
document_fileType string null false 文件类型
document_title string null false 文件名称
documentType string null false 文档类型
height string null false 窗口高度
type string null false 终端类型 desktop, mobile, embedded
width string null false 窗口宽度
events_onAppReady (event: object) => void null false 应用初始化
events_onDocumentStateChange (event: object) => void null false 文档修改
events_onMetaChange (event: object) => void null false 通过meta命令更改文档的元信息
events_onDocumentReady (event: object) => void null false 文档加载
events_onInfo (event: object) => void null false 应用程序打开了文件
events_onWarning (event: object) => void null false 出现警告
events_onError (event: object) => void null false 出现错误
events_onRequestSharingSettings (event: object) => void null false 点击置管理文档访问权限
events_onRequestRename (event: object) => void null false 点击重命名
events_onMakeActionLink (event: object) => void null false 点击书签获取链接，定位书签
events_onRequestInsertImage (event: object) => void null false 点击插入图片
events_onRequestSaveAs (event: object) => void null false 点击另存为
events_onRequestMailMergeRecipients (event: object) => void null false 点击选择收件人数据
events_onRequestCompareFile (event: object) => void null false 点击文档比对
events_onRequestEditRights (event: object) => void null false 点击编辑按钮
events_onRequestHistory (event: object) => void null false 点击历史版本
events_onRequestHistoryClose (event: object) => void null false 关闭历史版本
events_onRequestHistoryData (event: object) => void null false 点击特定版本
events_onRequestRestore (event: object) => void null false 点击恢复版本按钮
作者：秦晓川  创建时间：2024-05-18 21:30
最后编辑：秦晓川  更新时间：2024-06-22 10:51
上一篇：
下一篇：