Adding new buttons to "Quicktags" extension

alnokta

Hello How can I add a new button to Quicktags bar? I want a button that encloses the selected text between the following: <div dir="rtl">TEXT HERE</div> Thanks in advance ...

jsamlarose

Funny - just did this earlier today... Open your quicktags.js file. The following is the function used to create a button, and helps to explain what's happening: function edButton(id, display, tagStart, tagEnd, access, open) { this.id = id; // used to name the toolbar button this.display = display; // label on button this.tagStart = tagStart; // open tag this.tagEnd = tagEnd; // close tag this.access = access; // access key this.open = open; // set to -1 if tag does not need to be closed } Scan down the file to the first "edButtons[edButtons.length] = " entry - this is where the buttons are defined The following is the actual code used to make the blockquote button: edButtons[edButtons.length] = new edButton('ed_block' ,'b-quote' ,'<blockquote>' ,'</blockquote>' ,'q' ); I needed a highlight button - I run a feedback forum for poets, and it's nice to be able to highlight suggested changes in someone's text (almost like tracking changes in MS Word...) Here's the code I used: edButtons[edButtons.length] = new edButton('ed_highlight' ,'highlight' ,'<span class="highlight">' ,'</span>' ,'h' ); I added this after the "code" button and before the commented out "more" button - obviously, you'll add yours where you want it to appear...

jsamlarose

A couple of other things - 1: example for your request - edButtons[edButtons.length] = new edButton('ed_whatever_you_want_to_call_it' ,'whatever_you_want_to_call_it' ,'<div dir="rtl">' ,'</div>' ,'w' // or whatever key you want... ); 2: I defined the style "highlight" in quicktags.css 3: It works for me as described. ;)

alnokta

jsamlarose , THANK you very very much ... I cannot describe my appreciation for your help .... I got working ... Vanilla is so great ... community is fantastic :)

jsamlarose

*jsamlarose basks in the warm glow of being useful*

3stripe

what buttons are folks adding then?

alnokta

You talking to me ? It is just a button to let the users add Arabic text with the right direction ...

jsamlarose

My highlight button does pretty much what it says on the tin - sets the background to #fee8ef and the text colour to #74173d...

lyle

I added a button to embed a YouTube video using HTML Editor's video tags. Code here.

3stripe

Thanks folks - I'm going to include some of these buttons in Quicktags v0.6 If you have any other suggestions or code please post 'em up! :)