Blog Documentation Book a Demo

Adding new buttons to "Quicktags" extension

alnoktaalnokta
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 ...

Comments

  • jsamlarosejsamlarose
    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) { 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...
  • jsamlarosejsamlarose
    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. ;)
  • alnoktaalnokta
    jsamlarose , THANK you very very much ... I cannot describe my appreciation for your help .... I got working ... Vanilla is so great ... community is fantastic :)
  • jsamlarosejsamlarose
    *jsamlarose basks in the warm glow of being useful*
  • 3stripe3stripe ✭✭
    what buttons are folks adding then?
  • alnoktaalnokta
    You talking to me ? It is just a button to let the users add Arabic text with the right direction ...
  • jsamlarosejsamlarose
    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.
  • 3stripe3stripe ✭✭
    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.