alexking.org

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');
  • 42 Replies
  • 18 Comments
  • 0 Tweets
  • 0 Facebook
  • 24 Pingbacks
Last reply was June 12, 2012
  1. spacer konstans
    View December 30, 2006

    Thanx!

  2. analytik’s laboratory » Quicktags for Drupal 5
    View January 26, 2007

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

  3. spacer Anonymous
    View February 18, 2007

    spacer

  4. spacer Anonymous
    View March 5, 2007

    you are a very cool dude.

  5. Quicktags für das Kommentieren « Jared
    View April 11, 2007

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

  6. Tutorial Sammlung April - milko
    View April 12, 2007

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

  7. Tutorial Sammlung April » Beitrag » milko
    View April 24, 2007

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

  8. spacer mindex
    View May 20, 2007

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

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

  9. spacer BillyG
    View June 7, 2007

    That ‘close tags’ feature is pristine!

    As usual, Alex is the King.

  10. spacer garnet
    View June 14, 2007

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

  11. spacer anonymous
    View August 13, 2007

    spacer

  12. BoBo1664’s BLoG » Blog Archive » Thème Wordpress : HemingwayEx
    View October 10, 2007

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

  13. spacer larin
    View October 25, 2007

    Thank you very much!!!
    From Russia =) JS Quicktags – rulezzzzz! spacer

  14. All in a day's work...
    View November 16, 2007

    […] 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. […]

  15. anmut und demut - Drupal 6 - ToDos für mich
    View November 26, 2007

    […] 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 […]

  16. elektronik projeler uygulamalar web grafik tasarım » HyperElektronik » Triathlon Tema Modifiye+Çeviri
    View November 29, 2007

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

  17. elektronik projeler uygulamalar web grafik tasarım » HyperElektronik » Iceloopz Tema Modifiye+Çeviri
    View December 15, 2007

    […] 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 […]

  18. » LPGL 라이센스의 js-quicktags.js를 … blog
    View January 31, 2008

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

  19. elektronik projeler devreler web grafik tasarım » 320volt » Iceloopz Tema Modifiye
    View February 3, 2008

    […] 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 […]

  20. Syntax Highlighting with TinyMCE and Ruby on Rails | MoreBS.com
    View February 27, 2008

    […] 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 […]

  21. spacer GeekShadow
    View February 28, 2008

    It is possible to have a deleteatcursor function ?

  22. JS Quicktags 1.3 | alexking.org
    View March 2, 2008

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

  23. Triathlon Tema Modifiye | elektronik projeler devreler web grafik
    View March 6, 2008

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

  24. JS Quicktags 1.3.1 | alexking.org
    View March 16, 2008

    […] 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 […]

  25. spacer Ronin
    View June 12, 2008

    Excellent script, thanks for saving me hours!

  26. spacer dugunum
    View July 3, 2008

    hi,

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

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

    dugunum

  27. » Crear un Toolbar para formatear texto en un TextArea
    View August 10, 2008

    […] 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. […]

  28. Textile w komentarzach via JS | Normalne strony
    View August 31, 2008

    […] pomocy skryptu z alexking.org wzbogaciÅ‚em formularz komentowania o funkcjÄ™ wstawiania elementów Textile za […]

  29. Quicktags bei Kommentaren benutzen - Beitrag - Schweizer WordPress Magazin
    View September 6, 2008

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

  30. Wordpress 2.7b1 | The tech savvy writer guy
    View November 1, 2008

    […] I’m not the only one. Replacing quicktags.js in ~/wp-includes/ with a version downloaded from Alex King’s website cured the problem for me. I’m not sure whether there are any other implications from doing […]

  31. spacer Funka!
    View November 3, 2008

    Hello, I have looked through various posts of yours tracing back this “insertAtCursor” function to see if there is any mention of this working or not working in IE6? I have practically copied this as is into a page of mine, and IE6 is always inserting the text at the very beginning of the textarea. Firefox is working great. Thank you for your help!

  32. spacer Funka!
    View November 3, 2008

    Hello again, sorry I posted too hastily, and have been troubleshooting this IE6 scenario and it seems that it works great if your cursor was last in the textarea you want to insert to. However, if you focus to another textfield or textarea, the original textarea in IE6 seems to forget where its cursor position was. Thus, trying to insert to a textarea that was not the last field of focus in IE6 is not working. I shall try experimenting with providing IE6 with a “reminder” via an onBlur event and see if that works. Thanks again!

  33. spacer Jeffrey
    View November 28, 2008

    Very helpful, thank you.

  34. 用 quicktag 为 wordpress 评论框添加简单的编辑器 - xiaorsz's blog
    View December 5, 2008

    […] 官方主页 |  JS 下载 |  […]

  35. 从评论框编辑器Quicktag说开 | SMARTR.CN
    View December 19, 2008

    […] xiaorsz同学把Quicktag利用JQuery隐藏在一个“B”字中,原因是“因为一直没有找到好一点的图片,就先用这个了,其实不怎么喜欢!”在此借用一下他的截图: […]

  36. Tagi Textile w komentarzach - skrypt JS at Łukasz “Lukem” Wójcik
    View January 5, 2009

    […] już wspomniaÅ‚em, jest to modyfikacja skryptu JS QuickTags Alexa Kinga. Kilka moich poprawek wystarczyÅ‚o, by ten niewielki kawaÅ‚ek kodu zaczÄ…Å‚ generować znaczniki […]

  37. gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.