关于OnlyOffice word编辑器如何设置背景或背景图片(vue版本)

1 篇文章 0 订阅
1 篇文章 0 订阅

onlyoffice 7.5

1.通过vue挂载onlyoffice的编辑器

*目前编辑器支持两种方式引入 第一个是
npm install --save @onlyoffice/document-editor-vue

   ONLYOFFICE Docs Vue component - ONLYOFFICE Api Documentation

   文档地址

*第二个直接使用script进行引入

<script src="http://100.1.1/static/scripts/sdk/1.0.0/api.js"></script>

这里使用的就是第二种方法

我这里是单独开了一个组件作为编辑器的挂载逻辑页面  需要一个dom点作为onlyoffice挂载点类似于vue 的 #app

下面是主要的执行事件  是调用编辑器API的和建立连接的关键

    1. config['events'] = { onDocumentReady: onDocumentReady, onError: onError, onInfo: onInfo, onWarning: onWarning };
    //注册挂载完成事件,文档加载完毕事件,报错事件,警告事件。
    //例如当编辑器内部区域加载完毕后 会回调onDocumentReady所绑定的事件
    

    var config = {...}
    //editorDiv 是需要挂载的dom id ##必须是id名称不能是class
    2.window.docEditor = new window.DocsAPI.DocEditor('editorDiv', config)
    //这个位置是关键 通过传入的配置内容 创建一个编辑器示例 后面可以调用插件或者内置的一些API
    //config是你传入的编辑器配置是一个对象 具体内容可以参考官网的配置信息
  

    3. window.connector = window.docEditor.createConnector();
    //连接器注册 几乎所有编辑器内部API都需要该连接器调用 这里注册到window便于全局调用

**建议等到 onMounted 时在执行一下内容

这里举个例子调用api

window.connector.executeMethod("GetAllContentControls", null, function (data) {
  console.log(data, '获取文档中的ContentControls')
});

//connector 是你刚刚建立的连接器

//GetAllContentControls为你要调用的方法名称

//function (data)是onlyoffice给你回调的函数,部分api会携带一些参数返回

2.如何设置背景颜色 

直到目前onlyoffice 最新版 也就是8.1新增背景颜色的功能 但是还没增加背景图片
这里只是说一下我自己基于7.5写的api

(1)window.connector.executeMethod("UpLoadSetBackground", ["red"]);

UpLoadSetBackground 方法可以接收两个参数 都是以数组的方式传递。

第一个参数 是颜色 支持16进制,rgb,单词等, 可以传递图片的base64

第二个参数为一个type

(为什么要传递base64因为这需要根据你的使用onlyoffice的docker服务器而定,部分地址会被当作跨域处理,并且编辑器不会上报给用户。建议使用base64 这里我做了优化 不会很慢 也不影响渲染,滚动,缩放等)

举例:window.connector.executeMethod("UpLoadSetBackground", ["base64","image"]);

如果需要渲染背景图片则需要传递一个image作为type 如果不传默认color类型

 

第二个api 移除背景/背景图片

(2)window.connector.executeMethod("UpLoadRemoveBackground", []);

不需要传递任何参数 会自动删除当前背景颜色或图片 变回默认白色

[1]背景颜色

[2]背景图片

**以上背景的整体功能均不影响原有的功能 支持预览模式,简洁模式等

如水印,行背景,颜色背景,插入图片并悬浮于文字下,各类,图像,表格,图表等等

3.一些优化和当前问题

目前只做了微软office的格式 也就背景图片平铺模式,加了一些自己的算法去计算最大程度减少图片渲染对页面的效率影响(因为编辑器原有逻辑是当文档更改时会全部重新渲)。

问题:虽然该功能基本实现,但是无法完全复刻微软office的背景缩放样式,这地方我后期会继续跟进。

有其他见解可以沟通

  • 12
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中获取OnlyOffice在线编辑器的HTML,你可以使用OnlyOffice的JavaScript API。以下是一个示例代码: ```javascript // 获取OnlyOffice在线编辑器的HTML function getDocumentContent() { const docEditor = window.documentEditor; docEditor.document.getContent((content) => { console.log(content); // 这里可以将content保存到数据库或者发送到后端服务器 }); } // 在Vue组件中使用 export default { mounted() { // 在组件挂载后,初始化OnlyOffice编辑器 this.initEditor(); }, methods: { initEditor() { const editorElement = this.$refs.onlyOfficeEditor; const editorConfig = { type: 'desktop', document: { fileType: 'docx', url: 'http://your-document-url', }, editorConfig: { callbackUrl: 'http://your-callback-url', }, events: { onDocumentStateChange: (event) => { // 处理文档状态变化的事件 }, }, }; window.documentEditor = new DocsAPI.DocEditor(editorElement, editorConfig); }, getContent() { // 调用getDocumentContent()获取文档内容 getDocumentContent(); }, }, }; ``` 在这个示例代码中,我们首先定义了一个名为`getDocumentContent()`的函数,用于获取OnlyOffice在线编辑器的HTML内容。然后,在Vue组件中,我们通过`initEditor()`方法初始化OnlyOffice编辑器,并且将编辑器实例保存到`window.documentEditor`对象中,以便在其他方法中使用。最后,我们在组件中定义了一个名为`getContent()`的方法,用于在用户点击按钮时调用`getDocumentContent()`方法来获取文档内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值