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

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

可參考以下影片

步驟

• 可將 setting.json 中 "minify" 的設定由 true 改成 false ，方便 debug
• 創造 plugins 資料夾(舉例 ep_previewimages)
• 在資料夾中新增 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"}
}

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

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

{
  "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"
      }
    }
  ]
}

• 最後寫出 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:''
}];
}
}