Etherpad/外掛：修訂版本之間的差異

出自福留子孫
跳轉到： 導覽、 搜尋
（→‎步驟）
第 6 行： 第 6 行：
 
[https://www.youtube.com/watch?v=-pCNSqZF1dw 寫出第一個Etherpad外掛]
 
[https://www.youtube.com/watch?v=-pCNSqZF1dw 寫出第一個Etherpad外掛]
 
===步驟===
 
===步驟===
−
#將setting中的"minify"改成false，方便debug
+
#可將 setting.json 中 "minify" 的設定由 true 改成 false ，方便 debug
−
#創造plugins資料夾(舉例 ep_previewimages)
+
#創造 plugins 資料夾(舉例 ep_previewimages)
−
#在資料夾中新增packages.json，裡面打plugins的資訊(名字 作者 版本 描述 貢獻者 運行引擎)([https://etherpad.org/doc/latest/#index_plugins 範例(搜尋Package definition)])<br>  其中name 為plugin名字，version為plugin版本，description為plugin介紹，author為plugin作者，contributors為貢獻者名單，dependencies為寫程式所依賴的工具包，engines為運行引擎。
+
#在資料夾中新增 packages.json ，裡面打此外掛的基本資訊(名字 作者 版本 描述 貢獻者 運行引擎)，無涉外掛運用([https://etherpad.org/doc/latest/#index_plugins 範例(搜尋Package definition)])<br/>  其中 name 為外掛的名字， version 為外掛版本， description 為外掛介紹， author 為外掛作者， contributors 為貢獻者名單， dependencies 為寫程式所依賴的工具包， engines 為運行引擎。
 
#*<pre>{"name": "ep_PLUGINNAME",  "version": "0.0.1",  "description": "DESCRIPTION",  "author": "USERNAME (REAL NAME) <MAIL@EXAMPLE.COM>",  "contributors": [],  "dependencies": {"MODULE": "0.3.20"},  "engines": {"node": ">=12.13.0"}}</pre>
 
#*<pre>{"name": "ep_PLUGINNAME",  "version": "0.0.1",  "description": "DESCRIPTION",  "author": "USERNAME (REAL NAME) <MAIL@EXAMPLE.COM>",  "contributors": [],  "dependencies": {"MODULE": "0.3.20"},  "engines": {"node": ">=12.13.0"}}</pre>
−
#*以ep_previewimages中的packages.json為例<pre>{ "name": "ep_previewimages",  "description": "Image previewer, paste the URL of an image or upload an image using ep_fileupload",    "version": "0.0.13",  "author": "johnyma22 (John McLear) <john@mclear.co.uk>", "contributors": [],  "dependencies": {},    "repository": {        "type": "git",        "url": "https://github.com/JohnMcLear/ep_previewimages.git"  },    "engines": {    "node": "*"  }}</pre>
 
−
#在資料夾中新增ep.json，裡面打plugins的函式介紹( )([https://etherpad.org/doc/latest/#index_plugins 範例(搜尋Plugin definition)]) <br>*其中name 為plugin名字，hook 及client hook 中會寫出plugin使用的函式及位置。
 
−
<pre>{"parts":  [{"name": "nameThisPartHoweverYouWant",
 
−
    "hooks":  {
 
−
        "authenticate": "ep_<plugin>/<file>:functionName1",       
 
−
        "expressCreateServer": ep_<plugin>/<file>:functionName2"      },     
 
−
    "client_hooks": {      "acePopulateDOMLine": "ep_<plugin>/<file>:functionName3"  }   
 
−
    } 
 
−
  ]}</pre>
 
−
*以ep_previewimages中的ep.json為例
 
−
<pre>{ 
 
−
  "parts": [{
 
−
        "name": "ep_previewimages",     
 
−
        "client_hooks": {       
 
−
            "aceGetFilterStack": "ep_previewimages/static/js/index:aceGetFilterStack",       
 
−
            "aceCreateDomLine": "ep_previewimages/static/js/index:aceCreateDomLine"      }   
 
−
    }] }</pre>
 
−
#最後寫出index.js，裡面使用javascript語法寫出所需要的函式
 
−
#*以ep_previewimages/static/js中的index.js為例 以下為程式碼與註解
 
−
<pre>exports.aceGetFilterStack = function(name, context){
 
−
return [
 
−
// 傳回一個陣列，該陣列包含一個正則過濾器，用於將圖像URL替換為圖像
 
−
context.linestylefilter.getRegexpFilter(
 
−
// 創建一個正則表達式，用於匹配圖像URL
 
−
new RegExp("http.+((.[pP][nN][gG])|(.[jJ][pP][gG])|(.[gG][iI][fF])|(.[jJ][pP][eE][gG])|(.[bB][mM][pP])|(.[sS][vV][gG]))", "g"), 'image')
 
−
];
 
−
}
 
−
exports.aceCreateDomLine = function(name, args){
 
−
// 如果是圖像
 
−
if (args.cls.indexOf('image') > -1) {
 
−
var src;
 
−
// 將class字串中的'image:圖像URL'格式替換為'image image_圖像URL'
 
−
cls = args.cls.replace(/(^| )image:(\S+)/g, function(x0, space, image) {
 
−
src = image;
 
−
return space + "image image_" + image;
 
−
});
 
−
// 使用span包裝圖像，以防止在圖像URL後輸入文本而出現錯誤
 
−
return [{
 
−
  cls: cls,
 
−
  extraOpenTags: '<span style="display:block;"><img src="' + src + '" style="max-width:100%" /></span>',
 
−
  extraCloseTags:''
 
−
}];
 
−
}
 
−
}
 
−
</pre>
 

2023年4月25日 (二) 14:18的修訂版本


可參考以下影片

寫出第一個Etherpad外掛

步驟

  1. 可將 setting.json 中 "minify" 的設定由 true 改成 false ，方便 debug
  2. 創造 plugins 資料夾(舉例 ep_previewimages)
  3. 在資料夾中新增 packages.json ，裡面打此外掛的基本資訊(名字 作者 版本 描述 貢獻者 運行引擎)，無涉外掛運用(範例(搜尋Package definition))
    其中 name 為外掛的名字， version 為外掛版本， description 為外掛介紹， author 為外掛作者， contributors 為貢獻者名單， dependencies 為寫程式所依賴的工具包， engines 為運行引擎。 
    • {"name": "ep_PLUGINNAME",  "version": "0.0.1",  "description": "DESCRIPTION",  "author": "USERNAME (REAL NAME) <MAIL@EXAMPLE.COM>",  "contributors": [],  "dependencies": {"MODULE": "0.3.20"},  "engines": {"node": ">=12.13.0"}}
取自「http://well-being-ng.net/wellBeingNg/index.php?title=Etherpad/外掛&oldid=14203」