From MediaWiki.org
Jump to: navigation, search
MediaWiki extensions manual
Crystal Clear action run.png

Release status: stable

Implementation Tag, Page action
Description Create JavaScript character insert boxes.
Author(s) Brion Vibber
License GNU General Public License 2.0 or later
Hooks used

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

Check usage and version matrix; code metrics


Open tasks · Report a bug

CharInsert is an extension that creates JavaScript links that when clicked, insert predefined text into the text box.

These links are usually used in MediaWiki:Edittools system message (for an example, see MediaWiki:Edittools on this wiki).

Syntax[edit | edit source]

Use <charinsert> tags with a space-separated list of characters or tags for which you wish to allow insertion.

You can use + sign inside a tag to define a place to:

  • insert selected text or
  • place cursor if no text was selected.

You have to enclose templates and spaces inside <nowiki>:

<charinsert><nowiki>== + ==</nowiki> <nowiki>{{stub}}</nowiki></charinsert>

Usage and sample output[edit | edit source]

<charinsert>Á á Ć ć É é Í í Ĺ ĺ Ń ń Ó ó Ŕ ŕ Ś ś Ú ú Ý ý Ź ź</charinsert>

Á á Ć ć É é Í í Ĺ ĺ Ń ń Ó ó Ŕ ŕ Ś ś Ú ú Ý ý Ź ź

Note: Clicking the links will have no effect since there is no text box.

Notes[edit | edit source]

  • Generated JavaScript links also work in other areas around edit window, e.g. in MediaWiki:Copyrightwarning or MediaWiki:Newarticletext, on the page preloaded with Inputbox, and even from the text preview.
  • They can also be used in MediaWiki:Uploadtext to insert image description templates.
  • Unlike toolbar buttons on top, this extension doesn't provide a way to specify inserted "sample text".
  • Use &#13 to add new lines (\n).
  • Use &nbsp; to add white spaces.
  • Add <charinsert></charinsert> tags into Mediawiki:Edittools.

Installation[edit | edit source]

  • Download and place the file(s) in a directory called CharInsert in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
wfLoadExtension( 'CharInsert' );
  • 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 wfLoadExtension(), since MediaWiki 1.25. If you need to install this extension in earlier versions, instead of wfLoadExtension( 'CharInsert' );, you need to use:

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

Advanced Installation[edit | edit source]

Important: You must have Extension:Gadgets for this to work.

Styling[edit | edit source]


To give the charinsert lists additional styling, wrap the contents of your Edittools between <div class="mw-charinsert-buttons"> and </div> and add styling for them to your Mediawiki:Common.css. This site (www.mediawiki.org) does that to make the links appear like buttons (as shown in the screenshot to the side). The below stylesheet was used for that, copy it to your Mediawiki:Common.css to apply the same styling.

 * Styling for links generated by [[MediaWiki:Edittools]]
 * @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
 * @updated 2012-02-29
.mw-charinsert-buttons {
	margin-top: 10px;
	border: 1px solid #aaaaaa;
	padding: 1px;
	text-align: center;
	font-size: 110%;
.mw-charinsert-buttons a {
	color: black;
	background-color: #cde !important;
	font-weight: bold;
	font-size: .9em;
	text-decoration: none;
	border: thin #069 outset;
	padding: 0 .1em .1em;
.mw-charinsert-buttons a:hover,
.mw-charinsert-buttons a:active {
	background-color: #bcd;
	border-style: inset;
.client-js .mw-edittools-section {
	display: inline;
.client-js .mw-edittools-section input[type="button"] {
	font-size: 0.9em;
	padding-left: 1px;
	padding-right: 1px;
	margin-left: 1px;

Scripting[edit | edit source]

If you have many CharInsert links, one could use Javascript to put them in separate groups and allow dynamic switching with a dropdown menu. For example to separate diacritical characters from wikisyntax etc. Several sites (such as mediawiki.org, de.wikipedia.org and en.wikipedia.org) have done this. They all implemented it in different ways though. Documented below is the way it is done on mediawiki.org:

1. Wrap the all the charinsert tags on MediaWiki:Edittools into a <div> container and give it a descriptive, unique, ID (for example "mw-edittools-charinsert"):

<div id="mw-edittools-charinsert" class="mw-charinsert-buttons" title="Click on the wanted special character.">
2. Wrap each individual block of charinserts into p tags like this:
<p class="mw-edittools-section" data-section-title="Wiki-Syntax" style="display: none;">
  • Don't change the word 'mw-edittools-section'
  • The text behind "data-section-title=" will identify this group in the dropdown menu.
  • Make sure there is one group without the 'style="display: none;"' directive: That will be the default choice in the dropdown menu. On this site, it is called 'Standard' while the other groups are named by the language for which the characters are significant.
3. Copy the contents of MediaWiki:Gadget-Edittools.js to an equally named page on your own wiki
4. Add the following code to your Mediawiki:Gadgets-definition:
* Edittools[ResourceLoader|default]|Edittools.js

Language: English  • Deutsch • 日本語 • русский