RichText (BBCode)

 

BBCode Example Attributes Example HTML / CSS
b [b]bold text[/b]   <strong>bolded text</strong>
<span style="font-weight: bold;">bolded text</span>
i [i]italicized text[/i]   <em>italicized text</em>
<span style="font-style: italic;">italicized text</span>
u [u]underlined text[/u]   <ins>underlined text</ins>
<span style="text-decoration: underline;">underlined text</span>
s [s]strikethrough text[/s]   <del>strikethrough text</del>
<span style="text-decoration: line-through;">strikethrough text</span>
url
[url]https://en.wikipedia.org[/url]   <a href="https://en.wikipedia.org" target="_blank">https://en.wikipedia.org</a>
[url=http://step.pgc.edu/ type="button"]ECAT[/url] type=button <a href="http://step.pgc.edu/" class="btn btn-default mx-button" target="_blank" onclick="event && event.stopPropagation();">ECAT</a>
[url=http://step.pgc.edu/]ECAT[/url] set URL to the tag <a href="http://step.pgc.edu/" target="_blank">ECAT</a>
[url type="button"]http://step.pgc.edu/[/url] type=button <a href="http://step.pgc.edu/" class="btn btn-default mx-button" target="_blank" onclick="event && event.stopPropagation();">http://step.pgc.edu/</a>
img
[img]https://upload.wikimedia.org/wikipedia /commons/thumb/7/7c/Go-home.svg/100px-Go-home.svg.png[/img]   <img src="https://upload.wikimedia.org/wikipedia /commons/thumb/7/7c/Go-home.svg/100px-Go-home.svg.png" alt="" />
[img=40x30]https://upload.wikimedia.org/wikipedia /commons/thumb/7/7c/Go-home.svg/100px-Go-home.svg.png[/img] set width and height to the tag <img src="https://upload.wikimedia.org/wikipedia /commons/thumb/7/7c/Go-home.svg/100px-Go-home.svg.png" width="40" height="30">
[img width=50 height=50]https://upload.wikimedia.org/wikipedia /commons/thumb/7/7c/Go-home.svg/100px-Go-home.svg.png[/img] width
height
<img src="https://upload.wikimedia.org/wikipedia /commons/thumb/7/7c/Go-home.svg/100px-Go-home.svg.png" width="50" height="50">
quote [quote]quoted text[/quote]   <blockquote><p>quoted text</p></blockquote>
code [code]monospaced text[/code]   <pre>monospaced text</pre>
size [size=15]Large Text[/size] set size to the tag
The unit of measurement is pixel
<span style="font-size:15px">Large Text</span>
color [color=#FF0000]Red Text[/color] set color value to the tag
use hex value (https://en.wikipedia.org/wiki/Web_colors)
 
list [list]
*Entry 1
*Entry 2
[/list]
<ul><li>Entry 1</li><li>Entry 2</li></ul>
[list]
[*]Entry 1
[*]Entry 2
[/list]
<ul><li>Entry 1</li><li>Entry 2</li></ul>
[list]
[li]Entry 1[/li]
[li]Entry 2[/li]
[/list]
<ul><li>Entry 1</li><li>Entry 2</li></ul>
ul, li [ul]
[li]Entry 1[/li]
[li]Entry 2[/li]
[/ul]
  <ul><li>Entry 1</li><li>Entry 2</li></ul>
ol, li [ol]
[li]Entry 1[/li]
[li]Entry 2[/li]
[/ol]
  <ol><li>Entry 1</li><li>Entry 2</li></ol>
table, tr, th, td [table]
[tr]
[th]table 1[/th]
[th]table 2[/th]
[/tr]
[tr]
[td]table 3[/td]
[td]table 4[/td]
[/tr]
[/table]
  <table>
<tr>
<th>table 1</th>
<th>table 2</th>
</tr>
<tr>
<td>table 3</td>
<td>table 4</td>
</tr>
</table>
left, right, center [left]left text[/left]
[right]right text [/right]
[center]center text[/center]
  <span style="text-align: left;">left text</span>
<span style="text-align: right;">right text</span>
<span style="text-align: center;">center text</span>
youtube [youtube]E6jIuu3-wPM[/youtube]   <iframe width="100%" src="https://www.youtube.com/embed/E6jIuu3-wPM?rel=0" frameborder="0" allowfullscreen="">E6jIuu3-wPM</iframe>
iframe [iframe width=200 height=150]http://www.google.com[/iframe] width
height
 
[iframe=200X150]http://www.google.com[/iframe] width
height
 
mxButton
[mxButton=callback]Text[/mxButton]
[mxButton=callback payload="the-payload" client_id="the-client-id"]Text[/mxButton]
mxButton is customized bbcode to handle button click event.
set button type to tag, with 2 optional attributes
payload
client_id
<a class="btn btn-default mx-button" data-action="handleBotEvents" data-param="callback,,Text,">Text</a>
<a class="btn btn-default mx-button" data-action="handleBotEvents" data-param="callback,the-payload,Text,the-client-id">Text</a>
[mxButton=bot_postback payload="the-payload" client_id="the-client-id"]Text[/mxButton] payload
client_id
<a class="btn btn-default mx-button" data-action="handleBotEvents" data-param="bot_postback,the-payload,Text,the-client-id">Text</a>
[mxButton=bot_account_link payload="the-payload" client_id="the-client-id"]Text[/mxButton] payload
client_id
<a class="btn btn-default mx-button" data-action="handleBotEvents" data-param="bot_account_link,the-payload,Text,the-client-id">Text</a>