QuickTags 1.02

[sstoner]

Ok, this is my first Addon and should be considered Beta. Please report any problems in the Addon Help Forum. I would also like to thank faithless, LoneOwl and Parahead. Without their help, I would have never completed this simple addon. Thanks guys!

Addon Description:
QuickTags is a simple addon that will add buttons to the News Text field allowing users to insert selected HTML tags to news posts quickly and easily.

Selected Tags: Bold, Italic, Underline and Mailto

Compatibility:

Coranto
QuickTags has been tested with Coranto v 1.23 and 1.24. It should also work with older versions of Coranto but has not been tested.

Other Addons
QuickTags is not compatible with the WebWriter or HTMLBuilder Addons.

Browsers
QuickTags will work with MSIE and Gecko-based browsers (Mozilla, Camino, Firefox, Netscape). QuickTags will not work correctly with browsers that do not support inserting at the cursor position (Opera, Safari, OmniWeb). QuickTags will append tags to the end of the content in unsupported browsers. Javascript must be enabled.

Download QuickTags
A friend was kind enough to give me a little corner of her server space, so QuickTags can be downloaded here: http://www.ineb.org/sue/quicktags_v1.0.zip

[SrNupsen]

A friend was kind enough to give me a little corner of her server space, so QuickTags can be downloaded here

Also added to addon section of this site - if you don't mind, that is. Congratulations on your first addon!

SrNupsen

[sstoner]

That's great! Thank you.

[Rushian]

Compatibility:

Coranto
QuickTags has been tested with Coranto v 1.23 and 1.24. It should also work with older versions of Coranto but has not been tested.

Other Addons
QuickTags is not compatible with the WebWriter or HTMLBuilder Addons.

Nice work!

FYI: this does work fine on Coranto 1.02 (which does everything I need, so I never bothered to upgrade.)

Also, I already fixed my version of HTML Builder to play nice with the Related News add-on, so QucikTags works fine for me as well. Its been a very long time since I did the modifications to HTML Builder, but I *think* I just edited the textname (err, or was it the <FORM>?) fields to be unique and bumped up it's priority to put it ahead of the Related news addon. I'm not sure what other mods I made, or else I'd gladly offer up my version for others..

[tony2003]

Hi sstoner,
thanks for taking the time to produce this extremely useful addon.
Just one thing: the documentation seems to suggest that the addon might not work in Opera.
However I use Opera 7.51 (build 3798) and - so far anyway - it seems to work well.

Tony

[sstoner]

Hi Tony -- glad you've found the addon to be useful and glad it's working for you in Opera. I tested using Opera 7.54 Build 3869 on Win XP machine and it did not work correctly (inserts the tags at the end of the content). I'm not sure it would make a difference, but can you tell me what platform you're running? Maybe Opera supports inserting at the cursor position in platforms other than Windows?

[tony2003]

Hi Tony -- glad you've found the addon to be useful and glad it's working for you in Opera. I tested using Opera 7.54 Build 3869 on Win XP machine and it did not work correctly (inserts the tags at the end of the content). I'm not sure it would make a difference, but can you tell me what platform you're running? Maybe Opera supports inserting at the cursor position in platforms other than Windows?

Hi,
Yeah you're right, the tags are not inserted at the cursor point but at the end of the content!!
when i first tried the addon on a test news item I inserted the tags as i wrote the text of the item!!

Ah well, still a useful addon for IE etc.
Tony

[suestoner]

Wow, has this place changed! I haven't been here in a long time. It looks wonderful. Good job with the layout Kriko! Everything is so organized. By the way, I had to re-register with the Coranto forum (couldn't remember my password and the email account I had no longer exists), but it's me sstoner.

Just wanted to make this little improvement to QuickTags available to the Coranto community. It's no big deal, but I added a button for making a link as requested by a friend. You can get the new version here: http://www.ineb.org/sue/cra_quicktags1.02.zip

If someone wants to add the new version to the addon section, I would appreciate it so much.

I'm just so impressed with the improvements and the organization of the Coranto website...good job guys!
Sue

[Gilbert]

It's no big deal, but I added a button for making a link as requested by a friend.

Yeeeeeeeeeeeesssssssssssss.

It is it is Sue.

Many thanks just downloaded your add-on that escaped me until now.

[suestoner]

Wow Gilbert...Glad you like it. I haven't had any trouble with this add on, and I've used it on several sites (so have my friends), but if you notice anything weird, let me know.
Sue

[Groterra]

I tested using Opera 7.54 Build 3869 on Win XP machine and it did not work correctly (inserts the tags at the end of the content)

Opera 8.5 fixes this issue. Test it out. But 8.5 version brokes upload files processes with Multipart.

[Smood47]

Hey the updated quicktags are great but what about also adding a IMG button for the <img src=""> code ?

[Dale Ray]

Long Post Alert

You can add buttons as needed. Here is how to add your image button with the pop-up and also how to add a button without a pop-up.

Note: line numbers are with word wrap OFF and will change after the first lines are inserted. The forum software may wrap lines and add spaces at the end of lines, check for these problems if the code does not work. This was tested with Coranto 1.24. Make appropriate back-ups.

Open the cra_quicktags.pl file in a text editor.

At line 71 after this:

Code: Select all

edButtons[edButtons.length] = new edButton('ed_link'
                                          ,'Link'
                                          ,''
                                          ,'</a>'
                                          ); // special case


add this:

Code: Select all

// added image tag
// the end tag value is empty on purpose
edButtons[edButtons.length] = new edButton('ed_img'
                                          ,'IMG'
                                          ,'' // start tag
                                          ,'' // end tag
                                          ); // special case


at line 81 after this:

Code: Select all

   else if (button.id == 'ed_link') {
      document.write('<input type="button" id="' + button.id + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
   }


add this:

Code: Select all

   // added for image tag
   else if (button.id == 'ed_img') {
      document.write('<input type="button" id="' + button.id + '" class="ed_button" onclick="edInsertImg(edCanvas, ' + i + ');" value="' + button.display + '" />');
   }


at line 245 after this:

Code: Select all

function edInsertLink(myField, i, defaultValue) {
   if (!defaultValue) {
      defaultValue = 'http://';
   }
   if (!edCheckOpenTags(i)) {
      var link = prompt('Enter a website address' ,defaultValue);
      if (link) {
         edButtons[i].tagStart = '<a href="' + link + '">';
         edInsertTag(myField, i);
      }
   }
   else {
      edInsertTag(myField, i);
   }
}


add this:

Code: Select all

// added for image tag
// make sure that the function name is unique
function edInsertImg(myField, i, defaultValue) {
   if (!defaultValue) {
      // change the default to fit your needs, for example you image directory
      // full url - http://www.yoursite.com/pics/ or relative url /pics/
      defaultValue = 'http://';
   }
   if (!edCheckOpenTags(i)) {
      var link = prompt('Enter the url for your image' ,defaultValue);
      if (link) {
         edButtons[i].tagStart = '<img src="' + link + '" alt="">';
         edInsertTag(myField, i);
      }
   }
   else {
      edInsertTag(myField, i);
   }
}


You can add pop-up buttons for any other HTML tag you want using the same method.

This:

Code: Select all

// this defines the structure of each button
 function edButton(id, display, tagStart, tagEnd, 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.open = open;         // set to -1 if tag does not need to be closed
}
// this is the button for the strong tag
edButtons[edButtons.length] = new edButton('ed_bold'
                                          ,'Bold' // button label
                                          ,'<strong>' // start tag
                                          ,'</strong>' // end tag
                                          );


is the model for adding a button (comments added for clarity) without the pop-up window. As an example you would add this code to create a button for a link tag without the pop-up:

Code: Select all

edButtons[edButtons.length] = new edButton('ed_lnk'
                                          ,'URL' // button label
                                          ,'<a href="">' // start tag
                                          ,'</a>' // end tag
                                          );


Using the above code you would click the URL button, then enter the text to display as the link, and then click the URL button again. You would have to then place the cursor between the quotes after the equal sign and add the URL.

Hopefully this will help anyone who wants to customize the QuickTags addon.

[Dale Ray]

There is a bug in the code below that prevents the QuickTags buttons from being displayed when you edit an item that was saved with an empty text field:

$QuickTags_ModifyFormHook = <<'END_CODE';
if ($fn eq 'Text') {
$fcode =~ s/<textarea name="Text" rows="\d+" cols="\d+" wrap="VIRTUAL">.+<\/textarea>/<script type="text\/javascript">edToolbar();<\/script>\n<textarea id="canvas" name="Text" rows="$fieldDB{$fn}->{'FieldRows'}" cols="$fieldDB{$fn}->{'FieldCols'}" wrap="VIRTUAL">$$fn<\/textarea>\n<script type="text\/javascript">var edCanvas = document.getElementById('canvas');<\/script>/is;
}
END_CODE

Use this code instead:

$QuickTags_ModifyFormHook = <<'END_CODE';
if ($fn eq 'Text') {
$fcode =~ s/<textarea name="Text" rows="\d+" cols="\d+" wrap="VIRTUAL">.*?<\/textarea>/<script type="text\/javascript">edToolbar();<\/script>\n<textarea id="canvas" name="Text" rows="$fieldDB{$fn}->{'FieldRows'}" cols="$fieldDB{$fn}->{'FieldCols'}" wrap="VIRTUAL">$$fn<\/textarea>\n<script type="text\/javascript">var edCanvas = document.getElementById('canvas');<\/script>/is;
}
END_CODE

The offending code is at about line 279.

This fix supplied by Parahead in this thread

The fix works with both the latest version of QuickTags and earlier versions.

BTW: I often save items with the text field empty. Example: Scheduled sports event dates where the text field is used later to provide a summary of the event.

[driv]

I know this was posted 18 months ago - but I only just downloaded this mod today. (Yeah, I'm slow at everything).

Thanks to Sue for a cool addon and Dale for that explanation of the extra buttons.