You aren't signed in     Sign In    Help

Flickr Hacks / Discuss

Current Discussion

gupr - new flickr uploader
Latest: 6 hours ago
GM Script: Flickr Buddy Icon Reply v3.5 (updated 11th February 2009)
Latest: 9 hours ago
GM Script: Show Image Thumbnail
Latest: 15 hours ago
Bulk Rename?
Latest: 28 hours ago
GM Script: Flickr Contacts Organiser - Tag your contacts [ script updated 6th March 2009]
Latest: 2 days ago
Question about camera finder
Latest: 2 days ago
GM Script: Flickr Photo Favorers
Latest: 2 days ago
GM: Sort Tags and Groups/Sets in photo page
Latest: 3 days ago
Contest vote solution
Latest: 3 days ago
I need help [changing status of many contacts] :)
Latest: 4 days ago
GM Script: Flickr EXIF Decorator
Latest: 4 days ago
viewonblack.com bookmarklet
Latest: 5 days ago
More...

GM Script: Flickr Rich Edit

view profile

Todd Moon  Pro User  says:

UPDATE 2009-07-01

It hasn't been two years, but I fixed it anyway! I also decided to host it at userscript.org.

userscripts.org/scripts/show/52904

There's definitely an issue with Greasemonkey with Firefox 3.5. I was creating a function that called another function with the "this" keyword in it. Rather than referring to the object that contained the function, like it used to, it referred to some other object. Presumably something to do with Greasemonkey, because even a very simple version of this programming pattern works fine in straight-up javascript, but fails in GM.

Illustration:

//"box" is the ID of some div on the page.
var box = document.getElementById( 'box' );

box.innerHTML = 'Hello. Click me!';

box.originalMethod = function(){ this.innerHTML = 'originalMethod changed me.' };

box.onclick = box.originalMethod;

//"Greasemonkey" code starts here.
box.wrapperMethod = function() {
this.originalMethod();
this.innerHTML += 'And the new wrapper method added this!';
};

box.onclick = box.wrapperMethod;

This example code works fine if pasted into a script block in an HTML document containing a DIV with the ID of "box".

If you take all the code after "Greasmonkey" and put it in a GM script, and also add add a getElementById to the script, it fails with the same error we know and love.

Example GM script: (to try this, you should delete everything after "Greasmonkey" in the above example, but use that same document with a GM script you create for it. Leave the rest of the code above the comment there.)

var box = unsafeWindow.document.getElementById( 'box' );

box.wrapperMethod = function() {
this.originalMethod();
this.innerHTML += 'And the new wrapper method added this!';
};

box.onclick = box.wrapperMethod;

So, it's the exact same code, but it fails. Presumably, "this" refers to some other object and it's usage here creates a closure. So I simply created a closure of my own by referencing "box" in the body of the function:

box.wrapperMethod = function() {
box.originalMethod();
box.innerHTML += 'And the new wrapper method added this!';
};

And now it works fine. I hope that was helpful to any other GM script authors reading this.

UPDATE 2009-05-26

Wow, this update only took two years! :D

I added underline, strike, and image.

I only added the image button where it works. If you don't see it above an editor, it's because it wouldn't work there ayway. Surprisingly, you can use images in the description of a Collection, but not a Set.

I removed the automatic underline that all the commands had to emphasize the purpose of the underline command.

I once again fixed the spacing issue between the commands.

For any coders out there who care: I rewrote how each command invokes its function. Previously there was a silly switch statement, and only one "command" that changed behavior based on the command type that was padded in. Now I'm passing an anonymous function into the constructor of each CommandItem, and it invokes that function when clicked, whatever it is. It's so much more elegant.

I also rewrote the command enum to use powers of two and act like flags. Then I use bitwise operators to construct a bitmask reflecting the options I want showing for each of the editors. And the ControlBar class looks at the mask to see which commands to add, rather than all those "showThis", "showThat" parameters.

UPDATE 2007-05-11:

Now works with sets and collections.

The sets editor is incredibly small, so I also updated my Flickr Larger Description Editor to make the set description editor much larger.

Oddly enough, blockquote works in a collection description, so you'll see that option when editing one.

Original Post:

I'm posting a new thread in Flickr Hacks because I re-wrote jrhyley's Flickr Rich Edit script.

This adds html tools to various text areas on Flickr: any static text area like comment boxes, and it specifically targets the in situ photo description editors on individual photo page and your photostream!

I'm unsure if I should consider this an upgrade to jrhyley's script like my previous version did, or if I should consider this a new script. I decided to err on the side of caution. The name of the script is the same, but I changed the namespace, so this script will not overwrite jrhyley's version. If you use this new version you should disable or uninstall the older one.

Get the Flickr Rich Edit Script.

Differences you might notice:

I fixed a bug restoring the selection after inserting a tag. You can now select text and press Bold then Italic and you will get what you expect.

Inserting the tag is now a single text replacement, so if you press Undo, it will undo the entire tag insertion. Previously that would only undo the end tag and you had to hit undo again to undo the start tag.

I removed the default "http://" in the link prompt to make it easier to paste in a full link you already have in the clipboard.

You'll notice that it doesn't add the quote button to photo descriptions. That's because the blockquote tag is not supported in photo descriptions.

GM Script: Flickr Rich Edit

Eventually I'll make this work with sets and collections and any other in situ editor.

For any developers out there, I use some of javascript's object-oriented features. There is a ControlBar prototype as well as a ControlBarItem and a DescriptionDivControlBarLoader. Those three classes do all the work except for a few utility functions that determine what page you're on, etc.

I created a javascript pattern that can be used in any number of similar scripts that modifies the in situ photo description editors on the site. It's easy to adapt the pattern for a new need. I have created three such scripts so far. They all work at the same time, though I turned off the other two for the screenshots.

You might also be interested in my Larger Description Editor GM Script.

If you are an author of equirectangular panoramas you might like my Add SPi-V Link GM Script.
Originally posted at 1:32AM, 2 May 2007 PST ( permalink )
Todd Moon edited this topic 4 months ago.

view photostream

Linda B (Wine Diva) says:

Terrific update! Thanks for this :-D
Posted 31 months ago. ( permalink )

view photostream

zeelenz says:

This is terrific work. Keep it up.
Thank you so much for sharing it with us.
Posted 31 months ago. ( permalink )

view photostream

Jessica Smith (I changed it)  Pro User  says:

There is another rich editor script too, for comments (that i wrote)
Posted 31 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

Hi, Jessica. I did use your script for a while before I found jrhyley's. I find that I don't like the editable iframe. I'd rather see the source code as I generate it. I guess that's just a matter of taste. Your script is very nice. The source is beautiful!

By not hiding the comment text area I would think there's also less of a chance of conflicts with other scripts that also target the comment box.

I've been considering some changes to my version.

1) Use graphics instead of text links. (I'd make them look like flickr buttons with microtext, I think)

2) Adding underline (seems obvious, and someone asked for it from jrhyley. Not sure why it wasn't in the current version. )

3) Creating a standardized "button bar" which many scripts can target. Each such script should see if it already exists before creating it themselves. I have two scripts that add buttons to a description editor, and I think they should be standardized.

4) Borrowing your smiley interface.

Regarding #4, I'm not terribly familiar with the BSD license. It doesn't seem very restrictive, though. Modifying and adding your smiley interface to my script seems like it'd be acceptable. Would that be ok?
When I used your script it was nice to be able to add a graphical smiley to a comment.

BTW, I'm a little confused who authored your script. The copyright notice says Thom, but you said you wrote it. Are you really Thom inside Jessica's body? :-P
Posted 31 months ago. ( permalink )

view photostream

Jessica Smith (I changed it)  Pro User  says:

Or Jessica in Thoms body, however you wanna look at it!

The new BSD license is pretty relaxed, basically some credit somewhere is good and you can't use my name to endorse any derived software without permission, not that you'd want to since i'm not exactly famous. Other than that use what you want, glad you like the source! it started to get a bit messy as I kept going back to it.
Posted 31 months ago. ( permalink )

view photostream

Jessica Smith (I changed it)  Pro User  says:

Also you might want to look at this article about the lightbox i wrote for that script
Posted 31 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

I just posted version 0.4

This now works when editing the descriptions of sets and collections.

The sets editor is incredibly small, so I also updated my Flickr Larger Description Editor to make the set description editor much larger.
Posted 31 months ago. ( permalink )

view photostream

:: erika verginelli :: says:

this is wonderful but I'm not being able to install it ;-( when I click the above link it says"error loading user scrip 404: not found"

Weird, it never happened to me before and I've many many scrips installed from this group!

Please heeelp!!!! ;-) Thanks so much!
Posted 29 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

Sorry for the 404. Try it now.
Posted 29 months ago. ( permalink )

view photostream

Pixel Wrangler  Pro User  says:

I love this script -- use it everyday!

Is there any chance underscore (or "underline") could be added?
Posted 27 months ago. ( permalink )

view photostream

Odelot  Pro User  says:

Thank u for the script.

Can´t be added the img code and the underline????
Posted 26 months ago. ( permalink )

view photostream

PGTibs says:

Was just gonna say was trying to edit it so the link was the img code instead but it wont work. Why?
Posted 26 months ago. ( permalink )

view photostream

PGTibs says:

How about adding a option that when you click on it then it will add my name as a signature, so you have bold, what ever the other one is, link quote and signature. This possible? What about if i write in the script my name, then will it work?
Posted 26 months ago. ( permalink )

view photostream

PGTibs says:

Hey Hey!!! I just managed to edit this script so that it has another link which is my signature!!!
Posted 26 months ago. ( permalink )

view photostream

steeev is a group administrator steeev  Pro User  says:

i wrote a patch for this script, so it works on newly created textareas, for instance ones created by gm scripts, such as my Flickr Inline Post and Comment Editor. The patch isnt perfect as on certain flickr generated textareas you will get 2 control bars.

my patched version of the script can be obtained here: steeev.freehostia.com/flickr/flickrrichedit.user.js

and here is the code that ive inserted into the script:
//--------------------------------

// BEGIN: listener Function that checks for newly inserted textareas
// Code by Steeev steeev.freehostia.com/flickr + flickr.com/steeev/
// 4th june 2008

function insertedNodeDomHandler(event) {

// if its not a node containing other nodes and its not a textarea exit
if( !event.target.getElementsByTagName && event.target.nodeName!='TEXTAREA')
return;

if(event.target.nodeName=='TEXTAREA')
newtextareasA=[event.target];
else
newtextareasA=event.target.getElementsByTagName('textarea');

if(newtextareasA.length)
for(i=0; i if ( !newtextareasA[i].style || !newtextareasA[i].style.display || newtextareasA[i].style.display.toLowerCase() != "none" )
{
// make exceptions for mail editing GM textareas, as cant use rich edit functions there
if(newtextareasA[i].getAttribute('id') != 'damessagePMid' && newtextareasA[i].getAttribute('id') != 'damessageid') {
var controlBar = new ControlBar( true, true, true, true );
controlBar.inject( newtextareasA[0]);
}
}
}

document.addEventListener("DOMNodeInserted", insertedNodeDomHandler, false);

// END: listener Function that checks for newly inserted textareas
//--------------------------------
Originally posted 17 months ago. ( permalink )
steeev (a group admin) edited this topic 17 months ago.

view photostream

premasagar  Pro User  says:

With the upgrade to Firefox3, I find that the links squish together, with no margin between them. This is due to one too many semicolons in the script:

On line 153, change this:
link.style.marginRight = "8px;";

To this:
link.style.marginRight = "8px";

And then it will all display fine again.
Posted 16 months ago. ( permalink )

view photostream

Brenda Anderson  Pro User  says:

Ooh, that's better! Thanks premasagar.
Posted 16 months ago. ( permalink )

view photostream

Leo Reynolds  Pro User  says:

Thanks :)
Posted 16 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

@premasagar: Funny, I noticed that myself, and I finally got sick of it, so I investigated. I didn't know why it didn't work, so I used a work-around instead:

link.setAttribute('style','Margin-Right: 8px;');

Your fix is what I really wanted. I just didn't know what was wrong. Thanks! :) I'll update the file on my web site soon.

To everyone else: I'm glad you like my script. I haven't messed around with GreaseMonkey in a long time, hence no updates. I might work on it again soon and add underlining, images, or some sort of signature option.
Originally posted 15 months ago. ( permalink )
Todd Moon edited this topic 15 months ago.

view photostream

Jυstin  Pro User  says:

underline, strikethrough etc would be great - thanks for this script - it's just about my most often used
Posted 15 months ago. ( permalink )

view photostream

{ circle }.. ( ゚Д゚)/  Pro User  says:

thanks for the great scripts! but have you ever thought of making those text links into icons? it would looks much nicer.
Posted 14 months ago. ( permalink )

view photostream

ablichter  Pro User  says:

We (Kiwi and me) also rewrote this great script by jrhyley -original here , which now provides tags for italic, underline, bold, strike, 'blockquote', links and images.

We included the blockquote tag again, since it seems to work fine in FF3.
The img tag is meant for inserting a small thumb (default 50 by 50px) of an image to a comment.
Combining the img and the link tag, will let you insert clickable thumbs in a comment field, whereas the original (which should be in the 'link" tag) opens in a new window - click this:



First use the image tag than mark the whole string and use the link tag.

You might download the script with shorten tag names from the link provided on Kiwi's photo resp. here or with long tag names from my site



No icons yet, sorry!
Originally posted 12 months ago. ( permalink )
ablichter edited this topic 12 months ago.

view photostream

Gerla Brakkee  Pro User  says:

I've been reading all this and I'm none the wiser so I guess I'm an idiot.
I use rich text but only use the functions italic and bold because I have no idea how the 'quote' and 'link' functions work. I've tried messing with it but duhhhhhhhh
could someone please explain how it works?
I would love having these codes in there:
<a target=_blank href="link to website
and
" >text</a>
so that I wouldn't have to copy and paste those codes all the time when I am trying to make a link look nice (is that what the quote and link functions do?? )
Posted 12 months ago. ( permalink )

view photostream

ablichter  Pro User  says:


I would love having these codes in there:
<a target =_blank href="link to website and " >text</a>
so that I wouldn't have to copy and paste those codes all the time when I am trying to make a link look nice (is that what the quote and link functions do?? )

Yes, this is what the script does. Why not trying it out? You can't do anything bad.

When you want to use the link feature, you write something like "blabla here" in a comment, mark it with the mouse, than use the "link" tag and in the opening box you provide the URL (the link starting with "http://")

And the quote feature will do what happens with your quoted text in this comment.
Click quote and provide some text between <blockquote>here</blockquote> (instead of the word here)
Originally posted 12 months ago. ( permalink )
ablichter edited this topic 12 months ago.

view photostream

Gerla Brakkee  Pro User  says:

I did try to work with it but didn't do it right. I got it to work now. Thank you so much!
Posted 12 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

I finally updated my own version of this script. I added underline, strike, and image.

And I made a lot of code changes that no one but coders would appreciate. :)
Originally posted 6 months ago. ( permalink )
Todd Moon edited this topic 6 months ago.

view photostream

Seb Przd  Pro User  says:

Great!
Posted 6 months ago. ( permalink )

view photostream

Brian Matiash  Pro User  says:

I am using Firefox 3.5 Beta 4 on Mac OS 10.5.7 and Greasemonkey 0.8.20090123.1.

It seems that if I enable this script (or any other Rich Editor script) I lose the ability to edit any image description. Has this happened with any one else? I'd really love to be able to use this script and still edit my image descriptions.

Thanks!
Posted 5 months ago. ( permalink )

view photostream

SA de DV (Pachito Rex pa'los cuates)  Pro User  says:

Great!! I'll try it.
Posted 5 months ago. ( permalink )

view photostream

Seb Przd  Pro User  says:

Brian Matiash I have just upgraded to Firefox 3.5 and I have noticed the same issue as you: when Rich Edit is activated, the descriptions cannot be edited.

In the error console, there is an error when I try to edit a description:

Error: this.richEditStartEditing is not a function
Source File: file:[snip]/greasemonkey.js Line: 591
But the greasemonkey.js file does not have a line 591 (as expected), and the richEditStartEditing is provided in the flickr_rich_edit.user.js file.

The Larger Description Editor suffers from the same problem, so I would say the two are linked... The problem given there is:
Error: this.largerDescriptionEditorStartEditing is not a function
Source File: file:///[snip]/greasemonkey.js Line: 428

Originally posted 4 months ago. ( permalink )
Seb Przd edited this topic 4 months ago.

view photostream

★.A.N.A.★  Pro User  says:

I'm in the same boat as Brian Matiash! I hope there's an update on this because it's one of those scripts I can't do without! Hope you can update soon!
Posted 4 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

I'll update it in another two years, OK?

Just kidding! I haven't installed Firefox 3.5 yet. When I do, I'll take a look. I'm probably won't have a chance to check it out until Thursday night, or if I don't get to it then, then not until after the weekend.
Posted 4 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

Fixed. I still need to do the same with the Larger Description Editor script. I also want to migrate that to userscripts.org.

Here: userscripts.org/scripts/show/52905
Originally posted 4 months ago. ( permalink )
Todd Moon edited this topic 4 months ago.

view photostream

★.A.N.A.★  Pro User  says:

Todd Moon : Two years!??? Noooooo! LOL No, seriously, I love it!

Thank you so much for the update! It's really appreciated! Yeap, works like a charm now. =D
Posted 4 months ago. ( permalink )

view photostream

CotswoldPhoto  Pro User  says:

Hi

I'm using FF 3.5 and had a problem that others may have. When I installed the new versions, the old versions were still active and conflicting.

Now I have removed them all is well (ish).

On problem still persists from the older version of Rich Edit. Find an image of yours on which you have added a two or more line comment, say in answer to someone's comment. Click edit. The text in the box deletes some spaces to make conjoined words, and adds line returns where there weren't any. This does not happen in a discussion thread.
Posted 4 months ago. ( permalink )

view photostream

Pot Noodle 62  Pro User  says:

Thanks for the update, works a treat now
Posted 4 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

ClevaTreva,

I am unable to reproduce the problem you describe. I used two example paragraphs of text and commented on my own photograph. Then I edited the comment a number of times. At no point were spaces removed, or line breaks added.

Can you please try to reproduce the problem under the following conditions:

Disable all Firefox extensions other than Greasemonkey. Disable all GM scripts other than the Rich Editor script that would run on your photo page. Verify that the problem still occurs.

Then, if it does, disable the Rich Edit script and verify that the problem no longer occurs.

Then please tell me the exact text you were using in your comment before it got messed up, and any special steps you took to cause the problem. (For example, "I selected the word "birthday" and clicked on the Bold link", then his save.)

Thanks!
Posted 4 months ago. ( permalink )

view photostream

CotswoldPhoto  Pro User  says:

I'll do it tonight when I get home.
Posted 4 months ago. ( permalink )

view photostream

Todd Moon  Pro User  says:

ClevaTreva, OK, thanks.

I also didn't have the install problem you described. At work I still had an old version, and when I installed the new one, it overwrote it like I expected.

The file name is still the same, and so is the namespace in the script. It should not have created a duplicate entry.
Posted 4 months ago. ( permalink )

view photostream

CotswoldPhoto  Pro User  says:

OMG. My bad. Not your script that is causing this. A script called Inline Text Editor.
Posted 4 months ago. ( permalink )

view photostream

Seb Przd  Pro User  says:

Re: old versions conflicting

This happened to me, I still had the previous version (before you took over) and that one and the current version were both installed at the same time. Deleting the old one made everything work.
Posted 4 months ago. ( permalink )

view photostream

GlenFa  Pro User  says:

Thanks for the firefox 3.5 fix!! Greatly appreciated!!!
Posted 4 months ago. ( permalink )

view photostream

Matthew Stewart | Photographer  Pro User  says:

Nice fix for the Rich Text bug with Better Flickr. Cheers.
Posted 4 months ago. ( permalink )

view photostream

hkdigit  Pro User  says:

Great Update! It's help me a lot!
Posted 3 months ago. ( permalink )

view photostream

steeev is a group administrator steeev  Pro User  says:

ive modified the latest version of your script (added a listener for newly created textareas) so it works with my inline text editor script. the modified version of the rich edit script is available here: steeev.freehostia.com/flickr/flickrrichedit.user.js
Originally posted 4 weeks ago. ( permalink )
steeev (a group admin) edited this topic 4 weeks ago.

view photostream

kiwi_kirsch  Pro User  says:

hey steev and everyone who worked on fixing that description thing :D

i am confused. is this with me only?

screenshot
Originally posted 2 weeks ago. ( permalink )
kiwi_kirsch edited this topic 2 weeks ago.

Would you like to comment?

Sign up for a free account, or sign in (if you're already a member).

RSS 2.0 feedSubscribe to a feed of stuff on this page...</!!> Feed – Subscribe to Flickr Hacks discussion threads
Add to My Yahoo!