The script adds preview and changes Ajax buttons which are:

  • faster than standard buttons,
  • use less traffic,
  • retain the text cursor position and undo (Ctrl-Z) history.

Preview button updates content and edit summary previews and then executes global collapsing scripts.

Shift-clicking the button will update the previews of interwikis, categories and templates as well.

You still need regular non-Ajax preview:

  • to execute any other scripts on the preview area.
  • if your insert <syntaxhighlight lang="xxx"> or <categorytree>
  • "Preview" displays references when editing a section (by adding <references /> to the end of the text).
  • "Preview" highlights syntax when editing .js and .css files.
  • When editing an old version shift-click on "changes" will compare your text to that old version.

Add this to your common.js (or to your skin js page)

importScript('User:ansumang/ajaxPreview.js'); // [[user:ansumang/ajaxPreview]]

By default the new buttons do this:

  • appear on the right from the toolbar:

BIAb........................   previewchanges

  • capture p and v accesskeys from the standard buttons.
  • get names from the standard buttons (using last word).

This can be changed with the following parameters added to the same JS file as above.

Position:

var ajaxPreviewPos = 'left'; //buttons on the left


var ajaxPreviewPos = 'bottom'; //buttons on the bottom, replacing standard

The "old" standard buttons are then moved to the right and marked with ">": Save page Show preview> Show changes>

Accesskeys:

var ajaxPreviewKey = 'o'; //"preview" button accesskey
var ajaxDiffKey = 'b'; //"changes" button accesskey

Use empty string '' to disable accesskey.

Button text:

var ajaxPreviewButton = 'Ω'; //"preview" button text
var ajaxDiffButton = 'Δ'; //"changes" button text

Scrolling:

var ajaxPreviewScrollTop = true; //scroll to the top of preview/changes area after each update

Full update:

var ajaxPreviewFull = true; //always update interwikis, categories and templates as well

You can make the script call any custom userscripts by defining ajaxPreviewExec() function. For example, if you use NavPopups and want popups to appear in the Ajax-updated preview, use the following code:

var ajaxPreviewExec = function(previewArea) { //code to execute after each preview update
  if (window.setupTooltips) {
    setupTooltips(previewArea);
    previewArea.ranSetupTooltipsAlready = false;
  }
}