BB Code Enhancements - Advanced BBcodes Toolbar 2.1

Advanced BBcodes Toolbar
-Version 2.1-

Created by C?dric Claerhout
for www.vBulletin-fr.org

Version 3.0 is now available on a different system

THIS MOD WILL NOT BE UPDATED TO vBulletin 4.X
If someone wants to update it, please do

Presentation:
When I created this mod in 2007, its purpose was to add a toolbar to the Advanced Editor with new BBcodes. These new BBcodes were there to help members (most active ones) to design the layout of their messages which can quite look like an article from a magazine. It was funny to see how members could be very creative using the same tools.

Years after years, thanks to tutorial on vbulletin.org, I've updated this mod. In the new 2.0 version (2011), this mod can also help forum administrators to customize there Quick Edit & Quick Reply Editors. There are many options. I let you discover them.

The new toolbar can be added to all Editors. But personally I don't like it on the Quick Reply; because according to me it's not the purpose of a Quick Reply Editor and especially because [s]the vB 3.8 Editors don't have an "auto-save" function[/s] (They have ^^ See here).

This new toolbar can adds until 18 new BB Codes. Don't worry, even though it's a lot, these BB Codes will not mess up your Editors. Just have a look to the pictures. Some of these BB Code might be familiar to you. I've used them for many years and updated them to my needs. Most of them are home-made BBcodes.

Quick tour of these incorporated BB Codes:

1. BIMG BB Code: Resize a big picture
2. BIMGX BB Code: Resize a big picture giving its width
   [Safety Default&Max Width System included]
3. IGAUCHE BB Code: Insert a picture in absolute position to the left of a text
4. IDROITE BB Code: Insert a picture in absolute position to the right of a text
5. IGAUCHEX BB Code: Insert a resized picture in absolute position to the left of a text (width in px)
   [SDMWS included]
6. IDROITEX BB Code: Insert a resized picture in absolute position to the right of a text (width in px)
   [SDMWS included]
7. ARTICLE BB Code: Display an article inside a message.
   Custom CSS system according to the browser (IE or not) and the main style colors (dark or normal)
8. ENCADRE BB Code:This BB Code insert a text box to the right of a message. Default width is 20% of window
   Custom CSS system according to the browser (IE or not) and the main style colors (dark or normal)
9. ENCADREX BB Code: This BB Code insert a text box to the right of a message. You can change width giving a value in "%"
   Custom CSS system according to the browser (IE or not) and the main style colors (dark or normal)
   [SDMWS included]
10. SPOILER BB Code: This [spoiler] code allows to hide a part of a text
11. Justify Text BB Code: Display justified text
12. LATEX BB Code: Latex typesetting system allows to display mathematical content or graphics (YOU HAVE TO INSTALL LATEX ON YOUR SERVER !)
13. FIELDSET BB Code: This BB Code inserts a [fieldset] with a custom title
14. PICASA BB Code: This will insert a PICASA Slideshow (public or semi-private) inside your message using its RSS LINK (SEE TUTORIAL). For a demonstration, see here : Picasa Slideshow
15. Google DOCS Viewers: This BB Code allows to display documents using the "Google Docs - Viewer" (supports many different file types: pdf,ppt,doc,xls...). See example HERE.
16. WRONG BB Code: This BB Code allows your members to strike their text
17. PRIVATE BB Code: This BB Code allows to display a confidential content that only authorized users can read - See picture
18. CUSTOMIZED PRIVATE BB Code: same this as above but you can choose the TAG name of the BB Code - See picture

BBcodes results demonstration (basic)
Style with normal colors
Style with dark colors



How to install
This product is very easy to install and configure : unzip, upload files to your ftp, import the product and configure the module options (in vB options).

!!!PLEASE READ!!!
>In order to make this mod works, your editors templates (showthread_quickreply, postbit_quickedit, editor_toolbar_on) MUST NOT have been edited.
>In order to make this mod works, you MUST not have installed an other mod that will replace editors templates (showthread_quickreply, postbit_quickedit, editor_toolbar_on) with their own templates.

How to update
Upload files in your ftp and update the product. Go to vB options if needed.

How to use Text/Image Boxes BBcodes
Let's consider that you want to have a main text and a box text at his right. In order to display this, your members have to insert at first the Text Box, then the Main Text. Here is what the code looks like:
Code:
[ENCADRE]BLA BLA BLA[/ENCADRE]TEXT

Same thing for Image on the left or right of a text:
[igauchex=250]http://[/igauchex]TEXT

How to use the PICASA BBcode
1) Login at your PICASA account
2) Select your album for which you would like to display a slideshow inside your message
3) Click, right button of your mouse, on "RSS" which is located on the right of the page (see picture) and copy link.
4) Go back on your message, click on Picasa button and paste the link.

SEE THE EXEMPLE HERE

Version history:

23 November 2011: 2.1 version
> New PRIVATE and CUSTOM PRIVATE BBcodes; allow to display confidential message only to authorized users; tested on :

MESSAGES IN SHOWTHREAD, MESSAGES IN PRINTHREAD, MESSAGES IN ARCHIVE, NEW REPLY QUOTED MESSAGE, SEARCH BY POSTS, SEARCH BY THREAD - PREVIEW, SEARCH BY THREAD - PREVIEW, FORUMDISPLAY - FIRST POST PREVIEW, SHOWTHREAD - SIMILAR THREADS PREVIEW, INSTANT MAIL NOTIFICATIONS, DIGEST NOTIFICATIONS, RSS, GEEK GAZETTE (GAZ) and vBadvanced

> CSS UPDATE (work now with vBadvanced)
> TO UPDATE: don't forget to upload and replace server files (images & css)

27 August 2011: 2.0 version : BIG UPDATE
-Customized Quick Editor (QE) and Quick Reply (QR) editor options (
There are a lot of options (one included the display of the smilies box), please discover them on your own ^^
-Javascript code has been rewritten and corrected. It now uses its own template
-PHP CODE has been simplified and commented to help you if you need to customise it
-CSS updated for dark styles
-and the biggest update: a new icon for the Picasa button The former one was ugly.

16 August 2011: 1.8 version :
-New WRONG BBcode (line-through;stroke text)
-Fix a little bug

23 July 2011: 1.7 version :
-New "Google Docs Viewer" BBcode (PDF,PPT,XLS,DOC...)
-New option to activate or deactivate BBcode (one by one)
-Correct "phrase" problems in English version

26 July 2010: 1.6 version : New PICASA BBcode ; Insert a PICASA Slideshow (public or semi-private) inside your message using its RSS LINK.

20 August 2009: 1.5b version : bbcode parse pb fix

20 August 2009: 1.5 version | MAJOR UPDATE
-Code has been fully rewritten
-Usergroup permissions to display toolbar
-Checking datas sent by user. If the width is incorrect or to high, a default with replace the value. See the options.
-Better integration for the path configuration of Latex script
-A few bugs have been corrected

IMPORTANT : YOU HAVE TO FULLY UNINSTALL 1.4 VERSION
If you don't, you will have to delete one by one bbcodes added by 1.4 version before to make work 1.5 version


5 August 2009: 1.4 version | Tested with IE 8, FF, Opera, Chrome and Safari.
- New code management for "article, "encadre" and "encadrex" BB Codes. No need to edit CSS templates anymore. FIRST ENGLISH RELEASE.
-Special CSS for IE - autodetect.
-Special CSS styles with dark background - new settings in Product options
-Normal CSS in other cases.
Style sheets are in three external files that needed to be uploaded on your server.

5 August 2009: 1.3 version | Update for vB 3.8 templates. Some BB Code have been modified to make them display well in the Nice and Wonderfull IE 8 (May be as good as IE 6 ^^).

8 September 2007: 1.2 version | New Fieldset BB Code & Code Rewritten
6 September 2007 : 1.1 version | Phrased Product... and special translation system
4 septembre 2007: 1.0 version


Things to know
Some BBcode are using buttons with customised Javascript to display popups in order to help your members. But in the Quick Edit Editor, this customised Javascript will NOT work (see my problem here). It will use the vBulletin default system.

I do want to thank Viper007Bond for his hack "Embed XHTML valid YouTube and Google Video into your posts". Thanks to him I manage to understand how to make mine works. And, of course, I really want to thank this great young retired coder who is TheGeek for his module GARS. Thanks to his "New page" button I manage to use javascript.

I also want to thank Bogley that helps me to discover the Picasa Slideshow in this post.

Information
If you want to distribute this hack, please first ask my permission.

[cclaerhout]

Sorry no time to give any support.

[Acido]

God, someone port this masterpiece to vb 4.x !

[imedic]

Unfortunately after install this is making the text input area to disappear I have tried english and french version too. No luck.

I have tried to deactivate all buttons and still the body text input area of a reply / new thread is not there.

[cclaerhout]

What version of vB do you use ? What are the others hacks installed on your forum ?

I've just realised I didn't upload the 1.7 version which I use on my forums. The main modifications are :
1) [pdf, ppt and doc] bbcode (it uses Google)
2) Option to activate or deactivate each bbcode (even if users type the bbcode, if it isn't activated, nothing will display)

I need to make a quick English translation. I will do this before tomorrow.

Edit : I'm surprised, after one year, nobody noticed the Picasa bbcode could automatically deals with semi-private slideshow ^^ I was quite proud of this new function ! .

[cclaerhout]

Version 1.7 available.

[cclaerhout]

Version 1.8 available.

[mandrinvborg]

This is just incredible!

Perfect for forum members who regularly submit their own news and interest articles as now they can make the traditional and boring forum post look like a professional blog post.

Very nicely done!

[cclaerhout]

Originally Posted by mandrinvborg

This is just incredible!

Perfect for forum members who regularly submit their own news and interest articles as now they can make the traditional and boring forum post look like a professional blog post.

Very nicely done!

Thanks

[cclaerhout]

27 August 2011: 2.0 version BIG UPDATE
-Customized Quick Editor (QE) and Quick Reply (QR) editor options (
There are a lot of options (one included the display of the smilies box), please discover them on your own ^^
-Javascript code has been rewritten and corrected. It now uses its own template
-PHP CODE has been simplified and commented to help you if you need to customise it
-CSS updated for dark styles
-and the biggest update: a new icon for the Picasa button The former one was ugly.