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

2023年4月25日 (二) 13:49的修訂版本

可參考以下影片

步驟

1. 將setting中的"minify"改成false，方便debug
2. 創造plugins資料夾(舉例 ep_previewimages)
3. 在資料夾中新增packages.json，裡面打plugins的資訊(名字 作者 版本 描述 貢獻者 運行引擎)(範例(搜尋Package definition))
   其中name 為plugin名字，version為plugin版本，description為plugin介紹，author為plugin作者，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"}}

   • 以ep_previewimages中的packages.json為例

     { "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": "*"   }}

4. 在資料夾中新增ep.json，裡面打plugins的函式介紹( )(範例(搜尋Plugin definition))
   *其中name 為plugin名字，hook 及client hook 中會寫出plugin使用的函式及位置。

{"parts":   [{"name": "nameThisPartHoweverYouWant", 
    "hooks":  {
        "authenticate": "ep_<plugin>/<file>:functionName1",         
        "expressCreateServer": ep_<plugin>/<file>:functionName2"      },       
    "client_hooks": {       "acePopulateDOMLine": "ep_<plugin>/<file>:functionName3"   }    
    }  
  ]}

• 以ep_previewimages中的ep.json為例

{   
   "parts": [{ 
        "name": "ep_previewimages",       
        "client_hooks": {         
            "aceGetFilterStack": "ep_previewimages/static/js/index:aceGetFilterStack",         
            "aceCreateDomLine": "ep_previewimages/static/js/index:aceCreateDomLine"       }     
     }] }

1. 最後寫出index.js，裡面使用javascript語法寫出所需要的函式
   • 以ep_previewimages/static/js中的index.js為例 以下為程式碼與註解

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:''
}];
}
}