From MediaWiki.org
Jump to: navigation, search

Other languages:
català • ‎Deutsch • ‎English • ‎British English • ‎español • ‎suomi • ‎français • ‎italiano • ‎日本語 • ‎polski • ‎português • ‎português do Brasil • ‎中文
MediaWiki extensions manual
Crystal Clear action run.png

Release status: stable

CodeEditor extension screenshot.png
Description Provides a syntax-highlighting code editor for site & user JS, CSS and Lua pages, integrating with advanced edit toolbar
Author(s) Brion Vibber (Brion VIBBERtalk)
MediaWiki 1.17+
Database changes No
License GPL v2 (main), MPL/LGPL/GPL (Ace editor)
Hooks used


Translate the CodeEditor extension if it is available at translatewiki.net

Check usage and version matrix; code metrics


Open tasks · Report a bug

The CodeEditor extension extends the WikiEditor advanced editing toolbar with an embedded Ace editor widget, providing some handy features for user/site JS, CSS pages, and when Extension:Scribunto is also installed, for pages in Module namespace:

  • syntax highlighting for JavaScript, CSS and Lua
  • auto-indent
  • tab key produces tab indents (since 1.22), soft indents before.
  • indent/unindent selection with tab/shift-tab
  • syntax validity check for JavaScript
  • Pair-matching for parenthesis, braces and square brackets

Currently the extension is under development, and details of activation and functionality are subject to change.

Installation[edit | edit source]

Manual installation
  • Download and place the file(s) in a directory called CodeEditor in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
wfLoadExtension( 'CodeEditor' );
  • YesY Done - Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

To users running MediaWiki 1.24 or earlier:

The instructions above describe the new way of installing extensions using $LoadExtension, since MediaWiki 1.25. If you need to install this extension in earlier versions, instead of wfLoadExtension( 'CodeEditor' );, you need to use:

require_once "$IP/extensions/CodeEditor/CodeEditor.php";

(To run an extension on an earlier release, you may need to download the version of it tagged for that release from Special:ExtensionDistributor.)

Configuration[edit | edit source]

$wgCodeEditorEnableCore: Set this to true to enable the editor on JavaScript and CSS pages in the MediaWiki, User and other core namespaces.

In order to use this extension for Scribunto, set $wgScribuntoUseCodeEditor = true;

JavaScript Configuration[edit | edit source]

It is possible to change the configuration of the ACE editor, by hooking into the MediaWiki JS hook codeEditor.configure. The argument passed to your hook will be an ACE editor session.

WikiEditor integration[edit | edit source]

I've been integrating CodeEditor into the pluggable portions of Extension:WikiEditor as prep for Future editor work, since we'll want to be able to extend it to edit things that aren't plain wikitext, which'll need some changes to the toolbar setup and whatnot. JS/CSS here still return plain text in the end, making it an easier intermediate project. --brion 00:26, 14 June 2011 (UTC)


  • special char insertions work, including quote pairs to surround text
  • basic formatting insertions work, including link dialogs
  • search/replace dialog works
    • ace's built-in search/replace UI also triggers from keyboard commands, still need to disable them! (onCommandKey)


  • multi-line formatting doesn't apply correctly (but really should that apply here? :)


  • remove toolbar buttons that don't apply (formatting, syntax help?)
  • add toolbar buttons that are more directly useful
    • indent/outdent
    • insertion helpers for common keywords or code bits
    • help reference to MW JS API reference, JS & CSS specs/documentation

Compatibility[edit | edit source]

Browsers tested:

  • Firefox 4.0 / Linux
  • Chrome 10.0.648.204 / Linux

Browsers tested with issues:

  • Opera 11.10 / Linux: copy fails, paste sometimes crashes
  • IE 8.0.6001.18702 / Win XP: some newlines mysteriously removed, corrupting data; insertion point keeps resetting back to the top of the page after a click (arrow keys ok)
  • Safari / iPad 4.3 (8F190): renders ok, but can't set focus or scroll vertically. No focus means no typing. :(

Issues[edit | edit source]

Known issues:

  • probably explodes with classic toolbar now; use with Extension:WikiEditor toolbar. See also bugzilla:55419
  • accessibility: tab/shift-tab are overridden. is there a consistent alternative for keyboard-reliant users?
  • accessibility: accesskey on the original textarea needs to be moved over or otherwise handled
  • scrollbar initializes too wide; need to trigger resize check after that's filled (maybe fixed?)
  • cursor/scroll position not maintained over previews/show changes
  • upstream ctrl+R, ctrl+L, ctrl+T are taken over by the editor, which is SUPER annoying