[TUT] How to edit the post reply / new thread box

[Mark]

[TUT] How to edit the post reply / new thread box

This is a tutorial on how to edit the post reply box, the box that you type in when you make a post. Also known as the messageEditor or editor.

You're going to need to edit the following files

• jscripts/editor.js
  
• inc/languages/english/global.lang.pgp
  
• inc/functions.php
  

I'm going to show you how to add a "spoiler" button and a drop down menu.


Spoiler button

1) Open editor.js (You can use a program like gedit or notepad ++)

2) Search for the following code.

[code=javascript]{type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify},[/code]
And underneath it, enter the following code.

[code=javascript]{type: 'separator'},
{type: 'button', name: 'spoiler', insert: 'spoiler', image: 'spoiler.png', title: 'Insert spoiler tags'}[/code]
3) Save editor.js then upload it to your server.

4) You're also going to have to create an image for the spoiler button and upload it to /jscripts/editor_themes/default/images

Name the image spoiler.png, the dimensions are 23x22 pixels.

You should now have a fully functioning spoiler button.


Now, onto the harder part.

Adding a dropdown menu

1) open editor.js

2) Search for

[code=javascript]{type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},[/code]
3) Underneath it, add

[code=javascript]{type: 'dropdown', name: 'geshi', insert: 'code', title: this.options.lang.geshi, options: this.geshi},[/code]
* insert: 'code' is what will be inserted when you click later on.
* Also, Where mine says "geshi" you can put whatever you want but remember to name it the same thing in the next step.

4) Now, search for

[code=javascript]// An array of font sizes to be shown.[/code]
Underneath that, make your own set. Mine looks like this:

[code=javascript]
// An array of geshi / programming syntax to be shown.
this.geshi = new Object();
this.geshi["asm"] = "asm";[/code]
Remember what you put for geshi before? that relates to this, make sure you've named them the same!

// is a comment
this.geshi["asm"] is what will be displayed when you click the writing. ( = "asm"

Outcome = [code= asm] [/code]

You can add as many as you want here, just keep the same format.

5) Save and upload editor.js

6) Open global.lang.php

7) Search for

[code=php]$l['editor_size'] = "Text Size";[/code]
8) Below it, enter the following

[code=php]$l['editor_geshi'] = "Syntax";[/code]
Syntax is the writing that will appear by default in the box, when nothing has been chosen.

9) Save and upload global.lang.php

10) Open functions.php

11) Search for

[code=php]"editor_size",[/code]
12) Underneath it, add

[code=php]"editor_geshi",[/code]
13) Save and upload functions.php

You should now have a fully function drop down box.


The final result

[Mark]

I've just referenced this thread after the upgrade replaced my customisations and realised I've missed a bit out that goes with this! (atleast for me). Here's how to change the colour of the writing in the drop downs.

Open up:
./jscripts/editor_themes/default/stylesheet.css

Find
.messageEditor .toolbar_dropdown .editor_dropdown_label
For the main text eg. "Font", "Text Size", and "Syntax". Add desired CSS. (color: #000000

Find
.messageEditor .editor_dropdown_menu
For the colour of the items within the drop down.