Etherpad/外掛 - 修訂歷史

林芸伍於 2024年2月6日 (二) 08:18

2024-02-06T08:18:29Z

林芸伍：/* 寫好上述後的安裝步驟 */

2024-02-06T08:16:41Z

寫好上述後的安裝步驟

林芸伍：/* 如何寫出外掛 */

2024-02-06T08:13:28Z

如何寫出外掛

林芸伍於 2024年2月6日 (二) 07:52

2024-02-06T07:52:27Z

丁志仁於 2024年2月6日 (二) 07:10

2024-02-06T07:10:20Z

丁志仁：/* 找出圖片 URL： */

2023-04-25T08:55:49Z

找出圖片 URL：

丁志仁：/* 產生 img 標籤： */

2023-04-25T08:51:08Z

產生 img 標籤：

丁志仁：/* 產生 img 標籤： */

2023-04-25T08:48:24Z

產生 img 標籤：

丁志仁：/* 可用函式解說： */

2023-04-25T08:42:27Z

可用函式解說：

丁志仁：/* 可用函式解說： */

2023-04-25T08:36:42Z

可用函式解說：

←上個修訂		於 2024年2月6日 (二) 08:18 的修訂
第166行：		第166行：
	##package.json:主要為外掛資訊，留的是芸伍的資訊，有問題可詢問芸伍		##package.json:主要為外掛資訊，留的是芸伍的資訊，有問題可詢問芸伍
	##index.js，大部分仿照previewimages寫法，先標記特殊字元，再來增加HTML碼		##index.js，大部分仿照previewimages寫法，先標記特殊字元，再來增加HTML碼
		+	==參考網站==
		+	#[https://www.youtube.com/watch?v=-pCNSqZF1dw 寫出第一個Etherpad外掛]
		+	#[https://github.com/ether/etherpad-lite/wiki/Creating-a-plugin Github教學]
		+	#[https://docs.npmjs.com/creating-a-package-json-file package.json教學]
		+	#[https://jsonlint.com/ 判斷json格式]

@@ 第154行： / 第154行： @@
 #通常下一步會出問題，請先做好幾件事情
 ##將寫好的在本機端進行測試
-##務必上傳自己的github，(其實剛剛package.json就有需要)
+##務必上傳自己的github，(其實剛剛package.json就有需要)，連結後.git檔案資料夾就會出現
 ##若是確認無誤 可以使用npm publish上傳到網路上
 #寫好的外掛若是直接放到node_modules中，並不會運行，要使用 npm install安裝才有用，寫法如下
 #*npm install path/to/ep_plugins
 #*若是安裝沒問題，就可以直接使用外掛
 ===自用外掛介紹===
 #ep_previewtable

@@ 第122行： / 第122行： @@
 #這裡使用一個額外的 span 元素包裹圖片，以避免在圖片 URL 之後輸入文字時出現錯誤。
 ==如何寫出外掛==
-#首先要了解外掛結構，如下所示
+首先要了解外掛結構，如下所示
 <pre>ep_&lt;plugin&gt;/
   ├ .github/
@@ 第135行： / 第135行： @@
   ├ README.md
   ├ ep.json               ◄─ Etherpad plugin definition
   └ package.json
 </pre>
 重點是以下幾個檔案

←上個修訂		於 2024年2月6日 (二) 07:52 的修訂
第121行：		第121行：
	#返回一個 DOM 行描述物件的陣列，其中包含圖片元素及其樣式。		#返回一個 DOM 行描述物件的陣列，其中包含圖片元素及其樣式。
	#這裡使用一個額外的 span 元素包裹圖片，以避免在圖片 URL 之後輸入文字時出現錯誤。		#這裡使用一個額外的 span 元素包裹圖片，以避免在圖片 URL 之後輸入文字時出現錯誤。
		+	==如何寫出外掛==
		+	#首先要了解外掛結構，如下所示
		+	<pre>ep_<plugin>/
		+	├ .github/
		+	├ static/
		+	│ ├ css/ ◄─ static .css files
		+	│ ├ images/ ◄─ static image files
		+	│ └ js/
		+	│ └ index.js ◄─ static client-side code
		+	├ locales/
		+	│ └ en.json ◄─ English (US) strings
		+	├ LICENSE.md
		+	├ README.md
		+	├ ep.json ◄─ Etherpad plugin definition
		+	├ index.js ◄─ server-side code
		+	└ package.json
		+	</pre>
		+	重點是以下幾個檔案

←上個修訂		於 2024年2月6日 (二) 07:10 的修訂
第1行：		第1行：
−	[[分類:~~網路服務~~]]	+	[[分類:Etherpad]]

@@ 第83行： / 第83行： @@
      ),
    ];
-};<pre>
+};</pre>
 ====產生 img 標籤：====
 <pre>// 定義名為 aceCreateDomLine 的外掛函式，該函式接收兩個參數：name 和 args
@@ 第114行： / 第116行： @@
+   }
 };</pre>
-#函數 aceCreateDomLine 首先檢查 args.cls 是否包含 'image'。
+#函式 aceCreateDomLine 首先檢查 args.cls 是否包含 'image'。
 #如果是圖片 URL，則將 URL 設置為變數 src。
 #替換 args.cls 中的圖片 URL，生成一個新的 CSS class，格式為 'image image_URL'。
 #返回一個 DOM 行描述物件的陣列，其中包含圖片元素及其樣式。
 #這裡使用一個額外的 span 元素包裹圖片，以避免在圖片 URL 之後輸入文字時出現錯誤。

@@ 第67行： / 第67行： @@
 #:第二個參數：一個字串，用於指定「與匹配到的文本相關聯」的樣式名。如："image"。
 ====產生 img 標籤：====
-<pre>// 定義名為 aceCreateDomLine 的插件函數，該函數接收兩個參數：name 和 args
+<pre>// 定義名為 aceCreateDomLine 的外掛函式，該函式接收兩個參數：name 和 args
 exports.aceCreateDomLine = function (name, args) {
    // 檢查 args.cls 中是否包含 'image'，即是否為圖片 URL

←上個修訂		於 2023年4月25日 (二) 08:48 的修訂
第97行：		第97行：
	}		}
	};</pre>		};</pre>
		+	#函數 aceCreateDomLine 首先檢查 args.cls 是否包含 'image'。
		+	#如果是圖片 URL，則將 URL 設置為變數 src。
		+	#替換 args.cls 中的圖片 URL，生成一個新的 CSS class，格式為 'image image_URL'。
		+	#返回一個 DOM 行描述物件的陣列，其中包含圖片元素及其樣式。
		+	#這裡使用一個額外的 span 元素包裹圖片，以避免在圖片 URL 之後輸入文字時出現錯誤。

←上個修訂		於 2023年4月25日 (二) 08:42 的修訂
第66行：		第66行：
	#:第一個參數：一個正則表達式物件，用於指定要在文本中匹配的模式。如：「new RegExp("http.+((\.[pP][nN][gG])\|(\.[jJ][pP][gG])\|(\.[gG][iI][fF])\|(\.[jJ][pP][eE][gG])\|(\.[bB][mM][pP])\|(\.[sS][vV][gG]))","g")」		#:第一個參數：一個正則表達式物件，用於指定要在文本中匹配的模式。如：「new RegExp("http.+((\.[pP][nN][gG])\|(\.[jJ][pP][gG])\|(\.[gG][iI][fF])\|(\.[jJ][pP][eE][gG])\|(\.[bB][mM][pP])\|(\.[sS][vV][gG]))","g")」
	#:第二個參數：一個字串，用於指定「與匹配到的文本相關聯」的樣式名。如："image"。		#:第二個參數：一個字串，用於指定「與匹配到的文本相關聯」的樣式名。如："image"。
		+
		+	====產生 img 標籤：====
		+	<pre>// 定義名為 aceCreateDomLine 的插件函數，該函數接收兩個參數：name 和 args
		+	exports.aceCreateDomLine = function (name, args) {
		+	// 檢查 args.cls 中是否包含 'image'，即是否為圖片 URL
		+	if (args.cls.indexOf("image") > -1) {
		+	// 定義一個變數 src，用於存儲圖片 URL
		+	var src;
		+
		+	// 使用正則表達式替換 args.cls 中的圖片 URL
		+	cls = args.cls.replace(/(^\| )image:(\S+)/g, function (x0, space, image) {
		+	// 將圖片 URL 設置為 src
		+	src = image;
		+	// 返回一個新的 CSS class，格式為 'image image_URL'
		+	return space + "image image_" + image;
		+	});
		+
		+	// 返回一個 DOM 行描述物件的陣列，其中包含圖片元素及其樣式
		+	// 注意：這裡的額外 span 包裹器是必需的，用於避免在圖片 URL 之後輸入文字時出現錯誤
		+	return [
		+	{
		+	cls: cls,
		+	extraOpenTags:
		+	'<span style="display:block;"><img src="' +
		+	src +
		+	'" style="max-width:100%" /></span>',
		+	extraCloseTags: "",
		+	},
		+	];
		+	}
		+	};</pre>

@@ 第57行： / 第57行： @@
 ====可用函式解說：====
 在解說 index.js 之前，先介紹一些其中可以用的函式：
 #exports 物件， Node.js 的原生物件，用來定義模組的公開介面，也就是透過「require」引入模組後，可以訪問的屬性或方法。<br/>如「exports.aceGetFilterStack = function(name, context){...} 」是 Etherpad ep_previewimages 外掛的方法，載入此外掛後。就可以使用此方法來過濾出文本中匹配的行。
+#特定含義函式引數：
-#context.linestylefilter.getRegexpFilter(第一參數,第二參數)，造一個正則表達式過濾器，造好後添加到過濾器堆疊中，並在處理 Etherpad 文檔時使用。
+#*name(名稱)：這個參數代表了觸發這個函數的鉤子(hook)名稱。在調用函式中，開發者一般不需要對 name 參數進行操作，但有時候這個參數可以用於區分不同的鉤子。
 #:第一個參數：一個正則表達式物件，用於指定要在文本中匹配的模式。如：「new RegExp("http.+((\.[pP][nN][gG])|(\.[jJ][pP][gG])|(\.[gG][iI][fF])|(\.[jJ][pP][eE][gG])|(\.[bB][mM][pP])|(\.[sS][vV][gG]))","g")」
 #:第二個參數：一個字串，用於指定「與匹配到的文本相關聯」的樣式名。如："image"。

Etherpad/外掛 - 修訂歷史

林芸伍 於 2024年2月6日 (二) 08:18

林芸伍：​/* 寫好上述後的安裝步驟 */

林芸伍：​/* 如何寫出外掛 */

林芸伍 於 2024年2月6日 (二) 07:52

丁志仁 於 2024年2月6日 (二) 07:10

丁志仁：​/* 找出圖片 URL： */

丁志仁：​/* 產生 img 標籤： */

丁志仁：​/* 產生 img 標籤： */

丁志仁：​/* 可用函式解說： */

丁志仁：​/* 可用函式解說： */

林芸伍於 2024年2月6日 (二) 08:18

林芸伍：/* 寫好上述後的安裝步驟 */

林芸伍：/* 如何寫出外掛 */

林芸伍於 2024年2月6日 (二) 07:52

丁志仁於 2024年2月6日 (二) 07:10

丁志仁：/* 找出圖片 URL： */

丁志仁：/* 產生 img 標籤： */

丁志仁：/* 產生 img 標籤： */

丁志仁：/* 可用函式解說： */

丁志仁：/* 可用函式解說： */