BBCode demo and quicktag bar

4 replies [Last post]
rkn
rkn's picture
User offline. Last seen 11 weeks 1 day ago. Offline
Joined: 17-07-06

Quicktags bar should now be on above text input for easy formatting.

Here is a demo of nearly all the BBCode, if there is something extra people want from this list I may be able to put it into the quicktags bar:

Normal text formatting:

Test bold text
Test italic text
Test underlined text
Test strikeout text
Test subscript text - H2O
Test superscript text - X3

Font colors:

Test blue text
Test red text
Test green text
Test #eeff00 text

Font sizes:

Test 1px - too small, normalized to 6px
Test 12px text
Test 24px text
Test 100px - too big, normalized to 48px

Font faces:

Test Arial typeface text
Test Arial typeface text
Test Courier typeface text
Test Courier New typeface text
Test Impact typeface text
Test Helvetica typeface text
Test Times New Roman typeface text
Test Verdana typeface text

Text alignment:

Left hand side of the screen
Right hand side of the screen
Centered
This paragraph is justified on both sided on the page. By default most browsers render text with a jagged right edge. If you want all text rendered like in a book with an even right edge you can use the justify tag.

Images:

Normal image:

Float image right:

Re-sized image:

Let's test some URLs:

www.test-url.com
ftp.test-url.com
http://test-url.com/~user/,part,of,url
ftp://test-url.com:8080/
http://test-url.com/
Test URL

Anchor (bookmark you can link to):
URL Anchor

Some URL's within a sentence: http://url1.com; www.url2.com, (www.url3.com) and www.url4.com. And some more: ftp://url5.com/, (ftp.url6.com/) and ftp.url7.com.

Google link: BBCode
Wikipedia link: BBCode

Let's test some E-mail addresses:

Test@Mail.com
drupal.user@server1.drupal.org
joe@example.com
Joe Smith

Test headings:

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Test acronyms and abbreviations:

Abbreviations:
API
CMS
WWW

Acronyms:
SQL
GIF
radar

Code blocks:

Normal code block:

x := y + z;
y := a - b;

An inline code block

Color highlighted PHP code block:


<?php
  echo "Sample PHP code";
?>

Test notag:
These BBCode tags are [b]not[/b] converted to HTML!
I'm happy

Quoting

A simple quote:

Quote:
This is a quoted message

Quote with source:

Frank wrote:
This is a quoted message

Nested quotes:

Gabor wrote:
This is a quoted message
Alastair wrote:
This is a nested quote

Lists

A normal list (circular bullets, same as list=c):

  • x
  • y
  • z

List with discs (list=d):

  • x
  • y
  • z

List with squares (list=s):

  • x
  • y
  • z

Numeric list (list=1):

  1. x
  2. y
  3. z

Roman lowercase list (list=i):

  1. x
  2. y
  3. z

Roman uppercase list (list=I):

  1. x
  2. y
  3. z

Alfa lowercase list (list=a):

  1. x
  2. y
  3. z

Alfa uppercase list (list=A):

  1. x
  2. y
  3. z

A nested list:

  • x
    • x.1
    • x.2
  • y
  • z

Table tags

row1col1 row1col2
row2col1 row2col2

Other tags

Test marquee:
[move]Move tag - creates a scrolling display[/move]

Horizontal delimiter:


Force line break:
-->
<--

Force space:
--> <--

Test tag nesting:

large red text
again - large red test with different tag order

Test multi-line tags:



test

Joseph Kay's picture
User offline. Last seen 9 hours 42 min ago. Offline
Joined: 14-03-06

yep, its there, but the 'image' button is a bit obscure. I'm assuming the .png's can be changed at a later date? [/aesthetic grumbling]

rkn
rkn's picture
User offline. Last seen 11 weeks 1 day ago. Offline
Joined: 17-07-06

I've changed them now to how they were before. Hows that?

Joseph Kay's picture
User offline. Last seen 9 hours 42 min ago. Offline
Joined: 14-03-06

<p>plain yet pretty, just how i like it ;)</p><p>&nbsp;</p><p>wrong thread really, but i&#39;ve just noticed that when i hit refresh or back (firefox/windows) it jumps to the top of the page whereas the old boards returned to the same place. A minor quibble, but i notice since i have my browser quite minimised. I don&#39;t think that&#39;d be a HTML anchor issue since it didn&#39;t &#39;snap&#39; the view to the nearest post for example. </p>

rkn
rkn's picture
User offline. Last seen 11 weeks 1 day ago. Offline
Joined: 17-07-06

Yeah that was a cool feature. Not sure about getting it working here atm.