檢視 Etherpad/外掛的原始碼

[[分類:網路服務]]


可參考以下影片
<videoflash>-pCNSqZF1dw</videoflash>
[https://www.youtube.com/watch?v=-pCNSqZF1dw 寫出第一個Etherpad外掛]
===步驟===
#將setting中的"minify"改成false，方便debug
#創造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為運行引擎。
#*<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>