Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Adding new buttons to "Quicktags" extension

edited March 2007 in Vanilla 1.0 Help
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 ...


  • edited September 2006
    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) { = 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 = 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...
  • 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. ;)
  • 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 basks in the warm glow of being useful*
  • what buttons are folks adding then?
  • You talking to me ? It is just a button to let the users add Arabic text with the right direction ...
  • My highlight button does pretty much what it says on the tin - sets the background to #fee8ef and the text colour to #74173d...
  • lylelyle New
    edited February 2007
    I added a button to embed a YouTube video using HTML Editor's video tags. Code here.
  • 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! :)
This discussion has been closed.