htmljson編輯器(html代碼編輯)
一、onlyoffice是什么
ONLYOFFICE 是一個(gè)開源的辦公套件，適合多人在線協(xié)作。由總部位于總部在拉脫維亞的 IT 公司Acensio System SIA 開發(fā)。它提供在線協(xié)作文檔編輯器（包括文檔、電子表格、演示文稿和表單），適用于 Windows、Linux、macOS、Android 和 iOS 系統(tǒng)。也可以將 ONLYOFFICE 集成到學(xué)習(xí)管理平臺(tái)、同步與共享平臺(tái)、企業(yè)管理系統(tǒng)等，甚至集成到你自己的應(yīng)用程序中。ONLYOFFICE同微軟office、金山WPS的功能相似，可以看成是同一類軟件產(chǎn)品，但ONLYOFFICE的源代碼是開源的。另外，表單Forms是ONLYOFFICE 的一大特色功能，能直接在編輯器內(nèi)創(chuàng)建表單，可以實(shí)現(xiàn)類似于web表單功能和精細(xì)化權(quán)限控制。
ONLYOFFICE比MS OFFICE、WPS更強(qiáng)大的功能就是插件機(jī)制，支持安裝豐富的插件，比如OCR、ChatGPT、自動(dòng)翻譯、視頻通話、文本轉(zhuǎn)換、生成參考文獻(xiàn)、拼寫檢查等，大部分插件都免費(fèi)使用的，可以在線安裝。
ONLYOFFICE支持集成ChatGPT插件。ChatGPT是由人工智能研究實(shí)驗(yàn)室OpenAI在2022年11月30日發(fā)布的全新聊天機(jī)器人模型，一款技術(shù)驅(qū)動(dòng)的自然語言處理工具。它能夠通過學(xué)習(xí)和理解人類的語言來進(jìn)行對(duì)話，還能根據(jù)聊天的上下文進(jìn)行互動(dòng)，真正像人類一樣來聊天交流，甚至能完成撰寫郵件、視頻腳本、文案、翻譯、代碼等任務(wù)。在插件管理器中，找到 ChatGPT 并點(diǎn)擊安裝。
展開全文
運(yùn)行ChatGPT,輸入對(duì)應(yīng)的密鑰（需要通過科學(xué)上網(wǎng)，在OpenAI官網(wǎng)?(opens new window)中獲取API Key，目前國(guó)內(nèi)用戶無法注冊(cè)獲取。 ），然后就在可以在onlyoffice中使用ChatGPT了。
ONLYOFFICE的插件機(jī)制為開發(fā)者提供了極大靈活性，開發(fā)者可以通過底層API接口自定義插件實(shí)現(xiàn)業(yè)務(wù)上復(fù)雜需求，比如：協(xié)同辦公OA項(xiàng)目收發(fā)文的正文創(chuàng)建、編輯和下載；合同管理項(xiàng)目中合同協(xié)議的自動(dòng)生成等。云程低代碼開發(fā)平臺(tái)（http://www.yunchengxc.com）對(duì)開源版ONLYOFFICE進(jìn)行了集成整合，可以表單和流程中直接使用office文檔控件，并可配置文檔模版路徑，表單字段值自動(dòng)帶入，控制文檔是否可編輯，文檔是否只讀，是否加載水印，是否可以打印，是否可以另存下載，是否需要留痕，是否顯示留痕等權(quán)限。
二、項(xiàng)目如何集成onlyoffice
在springboot+vue項(xiàng)目中集成開源版onlyoffice組件，如果是私有化部署的項(xiàng)目，首先需要部署onlyoffice后端服務(wù)，然后使用onlyoffice的前端API進(jìn)行web集成調(diào)用。
1、安裝onlyoffice后端服務(wù)
onlyoffice后端服務(wù)安裝依賴RabbitMQ、Redis、PostgreSQL這些服務(wù)，支持在windows、Linux下安裝，也支持docker安裝。安裝方法這里不再展開描述，詳細(xì)請(qǐng)參考官方安裝文檔：https://www.onlyoffice.org.cn/guide/docker-onlyoffice.html
2、Web前端集成onlyoffice
onlyoffice提供了基于Javascript的API接口，https://documentserver/web-apps/apps/api/documents/api.js
Web前端調(diào)用示例如下：
!DOCTYPE htmlhtml
head
meta charset="UTF-8"
titleONLYOFFICE使用方法/title
!-- 引入外部JavaScript文件 --
script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"/script
/head
body
div id="placeholder"/div
script language="javascript" type="text/javascript"
var docEditor = new DocsAPI.DocEditor("placeholder",{
"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"
}
});
/script
/body/html
另外，onlyoffice還提供了vue、React 、Angular 語言的組件，可以在您的項(xiàng)目中從 npm 安裝 ONLYOFFICE 文檔相關(guān)組件
npm install --save @onlyoffice/document-editor-vue
npm install --save @onlyoffice/document-editor-react
npm install --save @onlyoffice/document-editor-angular
3、onlyoffice關(guān)鍵功能的API接口
業(yè)務(wù)系統(tǒng)中集成onlyoffice，常常涉及到的功能有：模版路徑配置，表單字段自動(dòng)帶值，文檔是否可編輯，文檔是否只讀，是否加載水印，是否可以打印，是否可以另存下載，是否需要留痕，是否顯示留痕等權(quán)限，onlyoffice分別提供了相關(guān)的API接口。
請(qǐng)參考官方文檔：https://api.onlyoffice.com
4、自定義插件實(shí)現(xiàn)表單字段自動(dòng)帶值
在OA電子公文、合同管理等業(yè)務(wù)系統(tǒng)中，常常需要把web表單字段的值自動(dòng)帶入到word文檔中，比如：合同編號(hào)、合同標(biāo)題等字段，如果使用微軟office，可以使用窗體域結(jié)合vba編程，實(shí)現(xiàn)字段值自動(dòng)同步。Onlyoffice 提供了強(qiáng)大的插件機(jī)制，可以自定義插件插件實(shí)現(xiàn)表單字段值自動(dòng)帶入功能。
我們先來看下onlyoffice插件目錄結(jié)構(gòu)：
├── config.json # 插件配置文件
├── icon.png # 插件圖標(biāo)
├── index.html # 插件入口文件
├── interface.js # 插件功能實(shí)現(xiàn)
├── plugins.js # 插件主程序入口文件
└── translations # 國(guó)際化配置
└── zh-CN.json
插件結(jié)構(gòu)非常簡(jiǎn)單，里面主要是 config.json、index.html、plugins.js 和 interface.js。需要保證config.json、index.html、interface.js、plugins.js這四個(gè)文件在同一個(gè)文件夾當(dāng)中, 然后將文件夾放入到容器內(nèi)的/var/www/onlyoffice/documentserver/sdkjs-plugins目錄下, 重啟即可。
# config.json參數(shù)說明
{
"guid": "asc.{11700c35-1fdb-4e37-9edb-b31637139601}",
"variations": [
{
"url": "index.html",
"EditorsSupport": ["word", "cell", "slide"],
"isSystem": true,
"initDataType": "none",
"initData": "",
"buttons": [],
"events" : [
"onClick"
]
}
]
}
- guid：插件的唯一值, 可自行更改, 但格式必須是asc.{}
- url: 在本插件中該html的作用主要是用來加載js
- EditorsSupport：聲明該插件在word、excel、ppt可用
- isSystem：設(shè)置該值為true后在菜單欄中不顯示該插件, 后臺(tái)自動(dòng)運(yùn)行該插件
- events：聲明事件
其他參數(shù)請(qǐng)看官方文檔：https://api.onlyoffice.com/plugin/config
plugins.js一般在onlyoffice容器內(nèi)的/var/www/onlyoffice/documentserver/sdkjs-plugins/v1目錄下, 可以直接從里邊拿過來復(fù)用。
interface.js就是插件功能的邏輯了，以下是interface.js代碼，主要實(shí)現(xiàn)了表單字段自動(dòng)帶值功能。
(function(window, undefined) {
var AscPlugin = window.Asc.plugin;
var executeMethod = function(method, arg) {
return window.Asc.plugin.executeMethod(method, arg);
};
AscPlugin.init = function(initData) {
// 避免綁定多次
if(!window['boundInternalcommand']){
// 該事件監(jiān)聽似乎在7.x版本后就失效了 我還沒嘗試過
window.parent.Common.Gateway.on('internalcommand', function(args) {
// 如果需要自定義插件的功能, 只需要在這個(gè)方法里接受參數(shù)寫邏輯就行
var data = args.data;
var command = args.command;
//設(shè)置表單字段值
if(command=="SetFormValue"){
window.Asc.plugin.executeMethod ("GetFormsByTag", [data[0]], function (res) {
this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,data[1]]);
});
}else if(command=="GetFileToDownload"){//獲取文件
window.Asc.plugin.executeMethod ("GetFileToDownload", Array.isArray(data) ? data : [data], function(res){
var obj = {
"cmd":"GetFileToDownload",
"url":res
}
window.parent.parent.postMessage(JSON.stringify(obj), "*");
});
}else{
(Array.isArray(data) ? data : [data]).forEach(function(arg, index) {
// 6.x版本中的api不支持批量的操作, 只能單個(gè)插入, 這里需要一個(gè)定時(shí)器才能做到批量的插入, 否則會(huì)報(bào)錯(cuò)或者什么都不插入
setTimeout(function() {
executeMethod(command, [arg]);
}, 100 * index);
});
}
});
window['boundInternalcommand'] = true;
}
// 在插件彈出窗外釋放鼠標(biāo)時(shí)觸發(fā)
AscPlugin.onExternalMouseUp = function() {
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mouseup', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
document.dispatchEvent(event);
};
AscPlugin.button = function(id) {
// 關(guān)閉插件彈出窗觸發(fā)
if (id === -1) {
this.executeCommand('close', '');
}
};
};
})(window, undefined);
核心代碼：
window.Asc.plugin.executeMethod ("GetFormsByTag", [data[0]], function (res) {
this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,data[1]]);
});
GetFormsByTag：根據(jù)標(biāo)簽獲取表單控件
SetFormValue：設(shè)置表單控件值
插件調(diào)用：
this.docEditor.serviceCommand("SetFormValue", [tagName,value]);
最后實(shí)現(xiàn)的效果如下：
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
