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

出自福留子孫
跳轉到: 導覽搜尋
第 4 行: 第 4 行:
 
可參考以下影片
 
可參考以下影片
 
<videoflash>-pCNSqZF1dw</videoflash>
 
<videoflash>-pCNSqZF1dw</videoflash>
寫出第一個Etherpad外掛
+
[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><code>{"name": "ep_PLUGINNAME",<br>"version": "0.0.1",<br>"description": "DESCRIPTION",<br>"author": "USERNAME (REAL NAME) <MAIL@EXAMPLE.COM>",<br>"contributors": [],<br>"dependencies": {"MODULE": "0.3.20"},<br> "engines": {"node": ">=12.13.0"}}</code><br>其中name 為plugin名字,version為plugin版本,description為plugin介紹,author為plugin作者,contributors為貢獻者名單,dependencies為寫程式所依賴的工具包,engines為運行引擎。
 +
#*以ep_previewimages中的packages.json為例<blockquote>{  "name": "ep_previewimages",<br>"description": "Image previewer, paste the URL of an image or upload an image using ep_fileupload",<br>  "version": "0.0.13",<br>  "author": "johnyma22 (John McLear) <john@mclear.co.uk>",<br>  "contributors": [],<br>  "dependencies": {},<br>  "repository": {<br>    "type": "git",<br>    "url": "https://github.com/JohnMcLear/ep_previewimages.git"<br>  },<br>  "engines": {<br>    "node": "*"<br>  }}</blockquote>
 +
#在資料夾中新增ep.json,裡面打plugins的函式介紹( )([https://etherpad.org/doc/latest/#index_plugins 範例(搜尋Plugin definition)])<br><code>{"parts": <br>[{"name": "nameThisPartHoweverYouWant",<br>"hooks": <br>{"authenticate": "ep_<plugin>/<file>:functionName1",<br>        "expressCreateServer": ep_<plugin>/<file>:functionName2"      },<br>      "client_hooks": {      "acePopulateDOMLine": "ep_<plugin>/<file>:functionName3"  }<br>  }  ]<br>}</code><br>其中name 為plugin名字,hook 及client hook 中會寫出plugin使用的函式及位置。
 +
#*以ep_previewimages中的ep.json為例<blockquote>{  "name": "ep_previewimages",<br>"description": "Image previewer, paste the URL of an image or upload an image using ep_fileupload",<br>  "version": "0.0.13",<br>  "author": "johnyma22 (John McLear) <john@mclear.co.uk>",<br>  "contributors": [],<br>  "dependencies": {},<br>  "repository": {<br>    "type": "git",<br>    "url": "https://github.com/JohnMcLear/ep_previewimages.git"<br>  },<br>  "engines": {<br>    "node": "*"<br>  }}</blockquote>
 +
 
 +
#最後寫出index.js,裡面使用javascript語法寫出所需要的函式

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


可參考以下影片

寫出第一個Etherpad外掛

步驟

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

    其中name 為plugin名字,version為plugin版本,description為plugin介紹,author為plugin作者,contributors為貢獻者名單,dependencies為寫程式所依賴的工具包,engines為運行引擎。
    • 以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))
    {"parts":
    [{"name": "nameThisPartHoweverYouWant",
    "hooks":
    {"authenticate": "ep_<plugin>/<file>:functionName1",
    "expressCreateServer": ep_<plugin>/<file>:functionName2" },
    "client_hooks": { "acePopulateDOMLine": "ep_<plugin>/<file>:functionName3" }
    } ]
    }

    其中name 為plugin名字,hook 及client hook 中會寫出plugin使用的函式及位置。
    • 以ep_previewimages中的ep.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": "*"
      }}
  1. 最後寫出index.js,裡面使用javascript語法寫出所需要的函式