在 phpBB3 中增加自訂 BBCode 的方法

[心靈捕手]

在 phpBB3 中增加自訂 BBCode 的方法

概觀

大家好!

這篇文章將解釋如何增加您自訂的 BBCodes. phpBB3 有一個強大的新功能, 就是讓您可以直接由 ACP 介面, 很容易地增加您個人化的 BBCodes -- 不需要外掛或改變代碼. 雖然 phpBB 預設包含有大多數流行的 BBCodes, 但是您還是會有需要增加個人所需的時候. 在文章的尾端有最需要的 BBCodes 列表, 可以容易地複製和貼上, 但是首先讓我們來看看如何新增 BBCode 以及使用它.

使用方法

一開始, 只要經由 ACP 點選 '發表'. 下一步, 點選左邊的 'BBCodes'. 下一步, 點選右邊的 '增加 BBCode'. 您將會看到有 3 個文字輸入框以及一個勾選的欄位. 這 'BBCode 使用方法' 輸入框, 是填入使用者所要使用的 BBCode. 這 'HTML 替換代碼' 輸入框, 是填入 BBCode 預設的 HTML 替換代碼. 這 '線上說明' 輸入框, 是填入滑鼠移過 BBCode 文字時顯示的內容. 最後, 這 '設定' 的勾選欄位, 是決定此 BBCode 是否顯示在發文時的頁面. 隱藏的 BBCode 按鈕, 並非無作用 -- 使用者仍然可以透過手動輸入 BBCode 而使用.

BBCode 使用方法
現在讓我們完成 'BBCode 使用方法' 輸入框. 在這裡, 是您輸入 BBCode 的地方. 它是相當容易的 -- 所有您需要做的是增加您的 BBCode 和標誌符號 (特別的大寫字母文字, 以 { 和 } 包圍 -- 把它們看作是如同搜索 Google 的萬用字元). 重點在決定放您的標誌符號和假如您的標籤必須任何額外的所有權/理由. 讓我們建立非常簡單的 (使文字呈現紅色的) [red] BBCode. 你將輸入:

代碼: 選擇全部

[red]{TEXT}[/red]

我可以使用什麼標誌符號呢? 如下:

{TEXT} -- 適用任何文字
{NUMBER} -- 適用任何數字
{EMAIL} -- 適用有效的 e-mail 位址
{URL} -- 適用有效的 URL
{LOCAL_URL} -- 適用本地的 (例如相同的 domain) URL
{COLOR} -- 適用 HTML 顏色, 可以是 3 組十六進位數格式, 像是 #000000, 或者是 CSS 顏色名稱, 像是 blue.

HTML 替換代碼
這裡是您為此新增的 BBCode 輸入 HTML 語法的地方. 繼續上面以 [red] BBCode (使文字呈現紅色) 的例子, 您將使用底下的 HTML 取代:

代碼: 選擇全部

<span style="color: red;">{TEXT}</span>

線上說明
非常簡單 -- 輸入簡短的描述, 以說明如何使用您新的 BBCode.

顯示在發文時的頁面設定
假如您沒有勾選這個設定, 那麼這個 BBCode 將不會顯示在發文時的頁面. 請注意! 這不是無效的 BBCode -- 只是 '隱藏' 它而已. 使用者總是可以手動輸入它. 假如您決定不顯示 BBCode 按鈕, 那麼請提供適當的管道讓您的會員知道 (例如: 公告).

其他的 BBCode 設定
要編輯 BBCode, 只要在 ACP / 發表 / BBCodes 頁面, 點選編輯圖示. 要刪除您不再需要的 BBCode, 只要在 ACP / 發表 / BBCodes 頁面, 點選刪除圖示. 注意! 假如您刪除 BBCode, 那麼這 HTML 語法也將被移除. 換句話說, 假如您刪除上頭範例的 [red] BBCode, 那麼您那些紅色的字將不再呈現, 而將只是顯示 [red]文字[/red].

普遍需要的 BBCodes
只要在 ACP 複製和貼上這些經常需要的 BBCodes.

Google Video
BBCode 使用方法:

代碼: 選擇全部

[googlevideo]{NUMBER}[/googlevideo]

HTML 替換代碼:

代碼: 選擇全部

<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=-{NUMBER}" width="400" height="326">
<param name="movie" value="http://video.google.com/googleplayer.swf?docId=-{NUMBER}" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>

使用方法舉例:

代碼: 選擇全部

[googlevideo]video ID number[/googlevideo]

線上說明:

代碼: 選擇全部

輸入影片的 ID -- 這影片的 ID 是在網址的 docid=- 之後

YouTube BBCode
BBCode 使用方法:

代碼: 選擇全部

[youtube]{TEXT}[/youtube]

HTML 替換代碼:

代碼: 選擇全部

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/{TEXT}" width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/{TEXT}" />
<param name="wmode" value="transparent" />
</object>

使用方法舉例:

代碼: 選擇全部

[youtube]YouTube video ID string here[/youtube]

或

代碼: 選擇全部

[youtube]uBbmiQhuAhU[/youtube]

線上說明:

代碼: 選擇全部

輸入影片的 ID -- 這影片的 ID 是在網址的 v= 之後

文字置中
BBCode 使用方法:

代碼: 選擇全部

[center]{TEXT}[/center]

HTML 替換代碼:

代碼: 選擇全部

<div style="text-align: center;">{TEXT}</div>

使用方法舉例:

代碼: 選擇全部

[center]centered text[/center]

文字左右對齊
BBCode 使用方法:

代碼: 選擇全部

[justify]{TEXT}[/justify]

HTML 替換代碼:

代碼: 選擇全部

<div style="text-align: justify;">{TEXT}</div>

使用方法舉例:

代碼: 選擇全部

[justify]justified text[/justify]

文字靠左對齊
BBCode 使用方法:

代碼: 選擇全部

[left]{TEXT}[/left]

HTML 替換代碼:

代碼: 選擇全部

<div style="text-align: left;">{TEXT}</div>

使用方法舉例:

代碼: 選擇全部

[left]left aligned text[/left]

文字靠右對齊
BBCode 使用方法:

代碼: 選擇全部

[right]{TEXT}[/right]

HTML 替換代碼:

代碼: 選擇全部

<div style="text-align: right;">{TEXT}</div>

使用方法舉例:

代碼: 選擇全部

[right]right aligned text[/right]

背景顏色
BBCode 使用方法:

代碼: 選擇全部

[background={COLOR}]{TEXT}[/background]

HTML 替換代碼:

代碼: 選擇全部

<span style="background-color: {COLOR};">{TEXT}</span>

使用方法舉例:

代碼: 選擇全部

[background=yellow]text on a yellow background[/background]

文字字體
BBCode 使用方法:

代碼: 選擇全部

[font={TEXT1}]{TEXT2}[/font]

HTML 替換代碼:

代碼: 選擇全部

<span style="font-family: {TEXT1};">{TEXT2}</span>

使用方法舉例:

代碼: 選擇全部

[font=Georgia]Georgia font[/font]

文字刪除線
BBCode 使用方法:

代碼: 選擇全部

[s]{TEXT}[/s]

HTML 替換代碼:

代碼: 選擇全部

<span style="text-decoration: line-through;">{TEXT}</span>

使用方法舉例:

代碼: 選擇全部

[s]strikethrough text[/s]

文字閃爍*
*備註: 無法正常運作於 IE 或某些瀏覽器.
BBCode 使用方法:

代碼: 選擇全部

[blink]{TEXT}[/blink]

HTML 替換代碼:

代碼: 選擇全部

<span style="text-decoration: blink;">{TEXT}</span>

使用方法舉例:

代碼: 選擇全部

[blink]blinking text[/blink]

下標*
*備註: 適用於化學式.
BBCode 使用方法:

代碼: 選擇全部

[sub]{TEXT}[/sub]

HTML 替換代碼:

代碼: 選擇全部

<span style="vertical-align: sub;">{TEXT}</span>

使用方法舉例:

代碼: 選擇全部

H[sub]2[/sub]O

上標*
*Note: 適用於數學.
BBCode 使用方法:

代碼: 選擇全部

[super]{TEXT}[/super]

HTML 替換代碼:

代碼: 選擇全部

<span style="vertical-align: super;">{TEXT}</span>

使用方法舉例:

代碼: 選擇全部

x[super]3[/super]

水平線
BBCode 使用方法:

代碼: 選擇全部

[hr][/hr]

HTML 替換代碼:

代碼: 選擇全部

<hr />

使用方法舉例*:
*注意: 不需要在中間輸入任何的文字.

代碼: 選擇全部

[hr][/hr]

假如您有任何關於增加普遍需求 BBCodes 的建議, 那麼請 PM 給我.

與您分享!

--
資料來源:
http://www.phpbb.com/kb/article/adding- ... in-phpbb3/

[心靈捕手]

前言:
這不是官方 KB 的文章, 回覆於此, 只是因為性質一致.

步驟:

1. BBCode 使用方法:

   代碼: 選擇全部

   [marquee]{TEXT}[/marquee]

2. HTML 替換代碼:

   代碼: 選擇全部

   <marquee>{TEXT}</marquee>

3. 線上說明:

   代碼: 選擇全部

   [marquee]文字跑馬燈效果[/marquee]

後記:
雖然 marquee 元素為 W3C 未列入規範的元素, 但是一般的論壇或網站, 普遍都有此一需求.
如果有需要, 那麼您還可以在 HTML 替換代碼中, 自行加入其他屬性. (列舉如下)

• scrolldelay: 屬性質--毫秒; 指定效果的延遲時間

  代碼: 選擇全部

  <marquee scrolldelay="70">{TEXT}</marquee>

• behavior: 屬性質--scroll/slide/alternate; 指定跑馬燈效果--捲軸/滑動/交替

  代碼: 選擇全部

  <marquee scrolldelay="70" behavior="alternate">{TEXT}</marquee>

• direction: 屬性質--left/right/up/down; 指定跑馬燈效果移動方向--向左/向右/向上/向下

  代碼: 選擇全部

  <marquee scrolldelay="70" direction="right">{TEXT}</marquee>

• bgcolor: 屬性質--#XXXXXX (RGB); 指定跑馬燈效果區域的背景顏色

  代碼: 選擇全部

  <marquee scrolldelay="70" behavior="alternate" bgcolor="#ffff00">{TEXT}</marquee>

• width: 屬性質--正整數/百分比; 指定跑馬燈效果區域的寬度

  代碼: 選擇全部

  <marquee scrolldelay="70" behavior="alternate" bgcolor="#ffff00" width="100%">{TEXT}</marquee>

• height: 屬性質--正整數/百分比; 指定跑馬燈效果區域的高度

  代碼: 選擇全部

  <marquee scrolldelay="70" behavior="alternate" bgcolor="#ffff00" width="100%" height="30">{TEXT}</marquee>

• style: 屬性質--font-size/color/font-weight; 指定跑馬燈效果的字型大小/字型顏色/字體厚度

  代碼: 選擇全部

  <marquee scrolldelay="70" behavior="alternate" bgcolor="#ffff00" width="100%" height="30" style="font-size: 18pt; color: #ff0000; font-weight: bold">{TEXT}</marquee>

[心靈捕手]

前言:

這個教學, 主要是補充第一篇文章中, 關於自訂 YouTube, Google 影音 BBCode 的方法.
不同的是, 它可以讓使用者直接輸入 "影音完整的路徑" 即可.

Google Video

BBCode 使用方法:

代碼: 選擇全部

[googlevideo]http://video.google.com/videoplay?docid=-{NUMBER}[/googlevideo]

HTML 替換代碼:

代碼: 選擇全部

<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId={NUMBER}&hl=en" flashvars=""></embed>

線上說明:

代碼: 選擇全部

[googlevideo]輸入 Google Video 完整的路徑[/googlevideo]

YouTube BBCode

BBCode 使用方法:

代碼: 選擇全部

[youtube]http://www.youtube.com/watch?v={SIMPLETEXT}[/youtube]

HTML 替換代碼:

代碼: 選擇全部

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT}"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/{SIMPLETEXT}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

線上說明:

代碼: 選擇全部

[youtube]輸入 YouTube 完整的路徑[/youtube]

後記:

一開始自訂 BBCode 時, 就得決定好, 究竟是要讓使用者輸入 "影音完整的路徑", 或者只是輸入 "影音的 ID".
否則, 一旦中途做了改變, 那麼之前所有的文章中, 已發表的 BBCode 都將失效, 得重新編輯, 修改才能正常.

--
參考連結:
http://www.phpbb.com/community/viewtopi ... 6&t=579376

[rex]

新增 Table 的 BBCode（非官方釋出）
原文連結：http://www.phpbb3bbcodes.com/viewtopic.php?t=2002

BBCode 使用方法:

代碼: 選擇全部

[tabela]{TEXT}[/tabela]

HTML 替換代碼:

代碼: 選擇全部

<script language="Javascript">
var texto = '{TEXT}';
texto = texto.replace("\r\n","");
texto = texto.replace("<br>","");
texto = texto.replace(" ","");
var linha = new Array();
linha = texto.split('L=');
var table = '<div align="center"><TABLE width=70% cellpadding=1 cellspacing=1 border=0>';
for (var i=1; i<linha.length; i++)
{
  table = table + '<TR>';
  var coluna = new Array();
  coluna = linha[i].split('&');
  for (var j=0; j<coluna.length; j++)
  {
    if (i == 1)
    {
      table = table + '<TD align=center style="background: #FF8904; font-size:11px; color:black; font-family:  Verdana,Arial, Helvetica, sans-serif;"><b>' + coluna[j].replace("amp;","") + '</b></TD>';      
    }
    else
    {
      table = table + '<TD style="background: #878282; font-size:11px; color:white; font-family:  Verdana,Arial, Helvetica, sans-serif;">' + coluna[j].replace("amp;","") + '</TD>';      
    }

  }
  table = table + '<TR>';
}
table = table + '</TABLE></div>';
document.write(table);
</script>

線上說明:

代碼: 選擇全部

使用 L=分行，使用 & 分列

[tabela]
L=Nome&Nick&Sexo
L=Tiago&Sapporo&Masculino
L=Laura&Witch&Feminino
L=Cesar&Rasec&Masculino
[/tabela]

[rex]

新增 空格字元（全形）（非官方釋出）

BBCode 使用方法:

代碼: 選擇全部

[emsp][/emsp]

HTML 替換代碼:

代碼: 選擇全部

 

線上說明:

代碼: 選擇全部

全形空格

＊若需新增半形空格可將其更改為
BBCode 使用方法:

代碼: 選擇全部

[ensp][/ensp]

HTML 替換代碼:

代碼: 選擇全部

 

線上說明:

代碼: 選擇全部

半形空格