My first extension (Quicktag formatting bar)

3stripe · June 2006

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)

3stripe · June 2006

Any other formatting options that would be useful? A "me" button?

Jazzman · June 2006

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!

3stripe · June 2006

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');
}
?>

3stripe · 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?

Jazzman · June 2006

Hehe, "Apres".. French ^^

3stripe · 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.

3stripe · June 2006

Updated, so that the Html radio button is autmatically selected if you use a Quicktag.

timberford · June 2006

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.

3stripe · July 2006

Dude I can't puzzle this out.. anyone else got any ideas why it might not be working?

Smoothie · 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

Mark · July 2006

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');
}

Smoothie · July 2006

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

3stripe · July 2006

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

Smoothie · July 2006

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.

3stripe · 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 :)

timberford · July 2006

awesome work guys it's fixed it for me! much appreciated.

Smoothie · July 2006

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

3stripe · July 2006

Ah I didn't know that. In fact I changed the <del> to <strike> so I'll change them back pronto!