Stack Apps is a question and answer site for apps, scripts, and development with the Stack Exchange API. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've converted a script that I hope to get embedded on a StackExchange site (Lego Answers) to a GreaseMonkey/Userscript but I'd like to get it interacting with the live preview when creating or editing questions and answers.

At the moment the script runs once the page is loaded and looks for our custom tags (for example [part:3700:4]) and when it finds one, calls a webservice to retrieve the part name and image details and then replaces the tag with the image.

However, this doesn't work with either inline editing or creating a question as the preview updates on the fly.

Has anyone else hooked a userscript or similar into the preview for this sort of feature?

The script can be seen here:

BrickJax: Brick Image Replacement

share|improve this question
My Code Golf UserScript might be a good example of how to do this. – Nathan Osman Dec 19 '11 at 0:00
Cheers @GeorgeEdison, I'll take a look at that too :) – Zhaph - Ben Duguid Dec 19 '11 at 0:10

There's a few ways to do it, but at first glance the simplest way would be to hook into the wmdrefresh event that will get called when the preview area is updated:

$(document).bind('wmdrefresh', function (event) {
    // Make your changes to's content

Keep in mind that the preview update fires many, many times, so be sure to cache the responses to your web service requests to avoid spamming the services or hanging the client.

share|improve this answer
Good call on the caching... – Zhaph - Ben Duguid Dec 18 '11 at 22:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .