Ipb 2.2:Insert Custom BBCode Tags with Editor Buttons

From IpbWiki

Easily Inserting Custom BBCode Tags with Editor Buttons

Place a noticeable button in your post editor for uses to easily call upon custom BBCode that is not assigned a button automatically. This button will appear right next to the 'Wrap in code tags' button in every post editor.

In this tutorial, I will use a YouTube BBCode as an example. If you want to be able to use this example and follow every step precisely then you must first create the custom BBCode in your Admin CP using this tutorial: http://www.platinum-zone.co.uk/forums/inde...p?showtopic=177

Final Result

Administration CP Enter the Administration Control Panel (Admin CP) by visiting your forums and instead of browsing the index.php inside your forums' directory, change index.php to admin.php. This will bring you to the screen in which you enter your administrative username and password.

CP Login Enter your administrative username and password (same as your forum username and password)

Look & Feel Tab Click on the Look & Feel tab at the top of your forum.

Skin Template HTML Click on the dropdown beside the skin and select Edit Template HTML from the dropdown menu.

Post / PM Editor Click on the Post / PM Editor template set.

ips_editor Click on the ips_editor template bit located in Post / PM Editor.

Template Bit Modification Follow these steps to add the code for the button.

Find:

Add After:

Save Template Bit Click on Save Template Bit.

Connect to FTP Launch your FTP Client (I use CuteFTP) and click on connect, and if your login cresidentials and host name are correct, you will log in to your host. Next, navigate into your forum directory and next to style_images. Find the skin you previously edited to add the code for the button and navigate inside its image set. Click on folder_editor_images and upload the file inside this ZIP directory: http://www.eladsites.com/images/rte-code-tube.zip

Note: Make sure you're inside /style_images/image_set_name/folder_editor_images.

Uncompress javascript In order for your YouTube button to correctly insert YouTube tags into your post, you must go into your board/Development/javascript_uncompressed/jscripts folder in the archive that you downloaded from your IPS Client Area and overwrite the existing file (/jscripts/ips_text_editor.js) with the uncompressed version. You will find that if you open the default file, not the uncompressed one, most of the javascript is compressed into one line.

You can find this file in board/Development/uncompressed_javascript/jscripts/ips_text_editor.js

Overwrite Compressed Simply drag this file from your archive into the /jscripts folder of your IP.Board forum and overwrite the existing file.

Edit File Open the file up in live editing. (Right click on ips_text_editor.js and select Edit)

Modify Contents Follow this to add the necessary javascript.

Find:

Add After:

Save File Ctrl + S to save this file and upload it to your jscripts folder (Done automatically)

Sit Back & Relax All done! Check to make sure it does what it's supposed to do when you click on it (Insert [Y0UTUBE][/Y0UTUBE] tags)

© 2007 by John of Platinum Zone. Find many more IPB tutorials at Platinum Zone