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.

My first extension (Quicktag formatting bar)

3stripe3stripe ✭✭
edited July 2006 in Vanilla 1.0 Help
I'm just polishing up my first extension, which is an implementation of Alex King's Quicktags, as seen on Wordpress et al.

You can apply styles using keyboard shorcuts which is nice... (Ctrl+Q for blockquote etc)

image

Comments

  • 3stripe3stripe ✭✭
    edited June 2006
    Any other formatting options that would be useful? A "me" button?
  • For Vanillacons and Attachments I use the following two delegates: "CommentForm_PreButtonsRender" and "DiscussionForm_PreButtonsRender".
    You'll have to use both of them for editing discussions and comments. They can point to the same render function though :) The extension looks nice!
  • Ok it's working :):):)

    I think I need to get permission from Alex though because I've modified his javascript.

    <?php /* Extension Name: Quicktags Extension Url: http://lussumo.com/addons/ Description: Inserts a javascript formatting bar to the post area, using Alex King's Quicktags) Version: 0.1 Author: James Greig Author Url: http://www.3stripe.net */ $Configuration["QUICKTAGS_PATH"] = 'extensions/Quicktags/'; if (in_array($Context->SelfUrl, array("post.php", "comments.php"))) { class QuicktagsBar { function QuicktagsBar_Create() { echo ' <div id="quicktags"> <script type="text/javascript">edToolbar();</script> </div><br /> '; } function QuicktagsBarApres_Create() { echo ' <script type="text/javascript">var edCanvas = document.getElementById(\'CommentBox\');</script> <script src="/extensions/Quicktags/quicktags.js" type="text/javascript"></script> '; } } } function AddQuicktagstoCommentForm(&$DiscussionForm) { $QuicktagsBar = new QuicktagsBar($DiscussionForm->Context); $QuicktagsBar-> QuicktagsBar_Create(); } function AddQuicktagsJavascriptafterCommentForm(&$DiscussionForm) { $QuicktagsBar = new QuicktagsBar($DiscussionForm->Context); $QuicktagsBar-> QuicktagsBarApres_Create(); } if( $Context->Session->UserID > 0) { $Head->AddScript($Context->Configuration["BASE_URL"].$Context->Configuration["QUICKTAGS_PATH"].'quicktags.js'); $Context->AddToDelegate("DiscussionForm", "CommentForm_PreCommentsInputRender", 'AddQuicktagstoCommentForm'); $Context->AddToDelegate("DiscussionForm", "DiscussionForm_PreCommentRender",'AddQuicktagstoCommentForm'); $Context->AddToDelegate("DiscussionForm", "CommentForm_PreButtonsRender", 'AddQuicktagsJavascriptafterCommentForm'); $Context->AddToDelegate("DiscussionForm", "DiscussionForm_PreButtonsRender",'AddQuicktagsJavascriptafterCommentForm'); } ?>
  • 3stripe3stripe ✭✭
    edited June 2006
    Actually, I'm going to lose that <br /> tag and add some css instead, that would be better. And html commenting will have to be turned on as well? How can I check that?
  • Hehe, "Apres".. French ^^
  • 3stripe3stripe ✭✭
    edited June 2006
    <french>Mais oui... c'est pas difficile!</french> I'm almost tempted to add a button for an <ironic> style.... could be nice... Does anyone want to help me build an Options panel to dynamically add buttons? I think you could modify this existing Quicktag options page (http://roel.meurders.nl/downloads/wp-addquicktag.php.txt) pretty easily.
  • 3stripe3stripe ✭✭
    edited June 2006
    Updated, so that the Html radio button is autmatically selected if you use a Quicktag.
  • I get a javascript error when clicking quick tag button and the tag isn't inserted into the comment... setCheckedValue is not defined line 298. is the error I have emailed 3stripe and he's taking a look for me but I just wondered if anyone else had experienced this or may be able to figure it out. The strange thing is locally the extension worked fine on my forum.
  • Dude I can't puzzle this out.. anyone else got any ideas why it might not be working?
  • edited July 2006
    Greetings. First off, great extension 3stripe. I love it. I've been using it on my forum and it's *essential*, since many of my users are not especially tech-savvy. Now, my suggestion (which should fix timberford's issue): When I first opened the quicktags.js file, there was some key code that was commented out on line 292 - characters that should have been new lines but were instead converted to boxes. This made the tags not work at all. After having fixed that, I found that commenting on existing discussions worked, but Quicktags still did not work when posting new discussions. Another glance at the javascript console in IE revealed: Error: document.forms.frmPostComment has no properties Source File: http://www.smoothie.deevineart.net/forum/extensions/Quicktags/quicktags.js Line: 314 Ergo, I looked at the line, compared it with the page's source code, and it became clear that each occurence of "frmPostComment", such as in setCheckedValue(document.forms['frmPostComment'].elements['FormatType'], 'Html'); Is not suitable for the new discussion page, whose form id is 'frmPostDiscussion'. Not being great with javascript, I'm not entirely sure how best to make it work with both different form id's, however hopefully this'll help point you towards the cause. Keep up the good work, -Smoothie
  • MarkMark Vanilla Staff
    You've got to get at the forms through their IDs, like this:

    var frm = document.getElementById('frmPostComment'); if (frm) { // Do stuff in here, like... setCheckedValue(frm.FormatType, 'Html'); }
  • Taking on board what Mark said, I've come up with a quick fix that works for me. View: http://phpfi.com/126909 Download: http://phpfi.com/126909?download
  • Hey thanks for fixing Smoothie and Mark :)

    I've updated the zip file on the Addons page... we're at v0.3 now... wahooo.... video quicktags coming soon
  • No problem, keep up the good work 3stripe. At the moment my javascript knowledge is minimal (I only understand because of syntax similar to PHP), but hopefully in the future I'll be able to contribute to this cracking extension.
  • 3stripe3stripe ✭✭
    edited July 2006
    You can join the dont-know-squat-about-javascript club with me dude! (Well, most programming languages apart from Actionscript to be honest) If you can work out why the "text-decoration: line-through" css on the strike button isn't working, you get some more brownie points... Having received so much help with all manner of stuff from kind people on this forum, I'm really happy to be giving something back for once :)
  • awesome work guys it's fixed it for me! much appreciated.
  • Hey 3stripe, I'm afraid I can't come up with a fix for that. However, it seems to me as though the underlining of the link button doesn't work either, which makes me think that none of the text-decoration in CSS is being applied correctly. By the way, <strike> is no longer valid XHTML. It's now necessary to use CSS or (more conveniently) <del> tags. Cheers, Rob
  • Ah I didn't know that. In fact I changed the <del> to <strike> so I'll change them back pronto!
This discussion has been closed.