JS Quicktags

I’ve released the JavaScript Quicktags used in Tasks Pro™, Tasks and WordPress under the LGPL license.

This is a set of buttons that allow you to insert HTML tags into a content area. The tags are cursor aware - placed around a selection or at the cursor position. This is also an example of how to get the cursor position with JavaScript.

Example Page

A sample insertAtCursor function:

function insertAtCursor(myField, myValue) {
  //IE support
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
                  + myValue
                  + myField.value.substring(endPos, myField.value.length);
  } else {
    myField.value += myValue;
  }
}

// calling the function

insertAtCursor(document.formName.fieldName, 'this value');

Popularity: 5% [?]

Last modified: 2008-03-02 20:21:39 GMT

29 Replies

  1. konstans adds this Comment:

    Thanx!

    December 30th, 2006 at 7:56 am

  2. analytik’s laboratory » Quicktags for Drupal 5 adds this Pingback:

    […] classic text buttons, just like we know them from Wordpress. Of course, it’s all based on quicktags by Alex […]

    January 26th, 2007 at 4:26 pm

  3. Anonymous adds this Comment:

    :)

    February 18th, 2007 at 12:06 pm

  4. Anonymous adds this Comment:

    you are a very cool dude.

    March 5th, 2007 at 9:48 pm

  5. Quicktags für das Kommentieren « Jared adds this Pingback:

    […] die den WYSIWYG-Editor verschmähen lieben ihre Quicktags. Mal schnell jemanden zitiert, ein fettes Wort geschrieben oder Codeschnipsel eingefügt. Leute […]

    April 11th, 2007 at 10:17 am

  6. Tutorial Sammlung April - milko adds this Pingback:

    […] für das Kommentieren“: Blogger die den WYSIWYG-Editor verschmähen lieben ihre Quicktags. Mal schnell jemanden zitiert, ein fettes Wort geschrieben oder Codeschnipsel […]

    April 12th, 2007 at 11:46 pm

  7. Tutorial Sammlung April » Beitrag » milko adds this Pingback:

    […] für das Kommentieren“: Blogger die den WYSIWYG-Editor verschmähen lieben ihre Quicktags. Mal schnell jemanden zitiert, ein fettes Wort geschrieben oder Codeschnipsel […]

    April 24th, 2007 at 12:47 am

  8. mindex adds this Comment:

    THIS EXSAMPLE IS SUPER!!!!!!!!!!!!!!!!!!!!!!!!

    THANK YOU!!!!!!!!!!

    May 20th, 2007 at 1:17 pm

  9. BillyG adds this Comment:

    That ‘close tags’ feature is pristine!

    As usual, Alex is the King.

    June 7th, 2007 at 8:14 am

  10. garnet adds this Comment:

    wanted it, saw it, got it! thanks Alex…excellent

    June 14th, 2007 at 2:15 am

  11. anonymous adds this Comment:

    :-)

    August 13th, 2007 at 8:07 pm

  12. BoBo1664’s BLoG » Blog Archive » Thème Wordpress : HemingwayEx adds this Pingback:

    […] Quicktags : permettant d’ajouter des contrôles au formulaire de commentaire. […]

    October 10th, 2007 at 2:54 am

  13. larin adds this Comment:

    Thank you very much!!!
    From Russia =) JS Quicktags - rulezzzzz! :)

    October 25th, 2007 at 10:49 am

  14. All in a day's work... adds this Pingback:

    […] JS Quicktags. This is a set of buttons that allow you to insert HTML tags into a content area. The tags are cursor aware - placed around a selection or at the cursor position. That ‘close tags’ feature is pristine! As usual, Alex is the King. […]

    November 16th, 2007 at 8:07 pm

  15. anmut und demut - Drupal 6 - ToDos für mich adds this Pingback:

    […] muss ich das Quicktags-Modul nehmen, oder - wenn das nicht taugt - ein Modul für Alex Kings JS Quicktags Editor schreiben, weil der einfach zu verdammt arsch handlich […]

    November 26th, 2007 at 12:11 pm

  16. elektronik projeler uygulamalar web grafik tasarım » HyperElektronik » Triathlon Tema Modifiye+Çeviri adds this Pingback:

    […] Tags,JS Quicktags,Math Comment Spam Protection,Subscribe to […]

    November 29th, 2007 at 1:46 pm

  17. elektronik projeler uygulamalar web grafik tasarım » HyperElektronik » Iceloopz Tema Modifiye+Çeviri adds this Pingback:

    […] eklentisi yazılara Ek özellikler katan (kalın,italik,link,alıntı,kod) etiket menüsü JS Quicktags Script eklendi bu uygulamayı kendi temanızda kullanmak isterseniz Buraya […]

    December 15th, 2007 at 11:26 am

  18. » LPGL 라이센스의 js-quicktags.js를 … blog adds this Pingback:

    […] 라이센스의 js-quicktags.js를 가지고 포스팅 창에서 html tag를 넣을 수 있도록 […]

    January 31st, 2008 at 11:03 pm

  19. elektronik projeler devreler web grafik tasarım » 320volt » Iceloopz Tema Modifiye adds this Pingback:

    […] eklentisi yazılara Ek özellikler katan (kalın,italik,link,alıntı,kod) etiket menüsü JS Quicktags Script eklendi bu uygulamayı kendi temanızda kullanmak isterseniz Buraya […]

    February 3rd, 2008 at 8:49 am

  20. Syntax Highlighting with TinyMCE and Ruby on Rails | MoreBS.com adds this Pingback:

    […] tiny_mce plugin and then realized that the code tab in Wordpress actually switches the editor to a quicktags editor. I set about creating the needed buttons and found the source of the switchEditor function […]

    February 27th, 2008 at 11:14 pm

  21. GeekShadow adds this Comment:

    It is possible to have a deleteatcursor function ?

    February 28th, 2008 at 2:49 pm

  22. JS Quicktags 1.3 | alexking.org adds this Pingback:

    […] new version of my JS Quicktags is now available. This release adds a very nice feature, the ability to attach the Quicktags to […]

    March 2nd, 2008 at 4:52 pm

  23. Triathlon Tema Modifiye | elektronik projeler devreler web grafik adds this Pingback:

    […] Tags,JS Quicktags,Math Comment Spam Protection,Subscribe to […]

    March 6th, 2008 at 1:01 pm

  24. JS Quicktags 1.3.1 | alexking.org adds this Pingback:

    […] pushed a new version of my JS Quicktags out. This is a bug fix release the catches two spots I missed that needed to be tweaked to support […]

    March 16th, 2008 at 9:14 pm

  25. Ronin adds this Comment:

    Excellent script, thanks for saving me hours!

    June 12th, 2008 at 8:42 am

  26. dugunum adds this Comment:

    hi,

    i use this beatiful script on my coppermine gallery, it’s really work,

    and we still disscuss on this script at http://forum.copperm[...]picseen.html
    thx

    dugunum

    July 3rd, 2008 at 2:34 am

  27. » Crear un Toolbar para formatear texto en un TextArea adds this Pingback:

    […] El mejor ejemplo que podrán conseguir lo pueden ver en esta misma página, en la parte Dejar un comentario. Pueden encontrar otro ejemplo igual de bueno en la página de Alex King. […]

    August 10th, 2008 at 8:06 pm

  28. Textile w komentarzach via JS | Normalne strony adds this Pingback:

    […] pomocy skryptu z alexking.org wzbogaciłem formularz komentowania o funkcję wstawiania elementów Textile za […]

    August 31st, 2008 at 12:26 am

  29. Quicktags bei Kommentaren benutzen - Beitrag - Schweizer WordPress Magazin adds this Pingback:

    […] du solche Quicktags auch bei anderen Projekten als in deinem Blog verwenden möchtest, empfehle ich JS Quicktags von Alex […]

    September 6th, 2008 at 4:07 am

Add a Comment

Please note: Use of a non-personal web site or blog in the field below and/or comments that are off-topic, personal attacks, or support requests will likely be removed at my discretion.

About This Site

This is the personal web site of Alex King, a web developer in Denver, Colorado USA. More...


Crowd Favorite

Crowd Favorite is my software and web development business.

We build web applications, design and develop custom WordPress themes and plugins, and build custom sites using WordPress as a CMS.


I also have a tumblog that aggregates my online content from other services (Twitter, Flickr, del.icio.us. etc.).

I'm voting for Barack Obama

Ads