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的背景缩放样式,这地方我后期会继续跟进。
有其他见解可以沟通