Extension:CharInsert - MediaWiki

Extension:CharInsert - MediaWiki
Jump to content
From mediawiki.org
Translate this page
Languages:
Bahasa Indonesia
Türkçe
polski
čeština
русский
العربية
हिन्दी
বাংলা
ไทย
中文
MediaWiki extensions manual
CharInsert
Release status:
stable
Implementation
Tag
Page action
MyWiki
Description
Allows to create JavaScript character insert boxes.
Author(s)
Brion Vibber (
Brooke Vibber
talk
Latest version
continuous updates
Compatibility policy
Snapshots releases along with MediaWiki. Master is not backward compatible.
Tags
‎<
charinsert
Hooks used
BeforePageDisplay
ParserFirstCallInit
Licence
GNU General Public License 2.0 or later
Download extension
Git
Browse repository
GitHub
Gerrit code review
Git commit log
Download source tarball
Translate the CharInsert extension
if it is available at translatewiki.net
Issues
Open tasks
Report a bug
The
CharInsert
extension allows the creation of
JavaScript
links that, when clicked, insert predefined text into a
text box
These links are usually used in
MediaWiki:Edittools
(example on this wiki) system message.
Syntax
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
Individual characters
Individual characters are just listed between the
‎<
charinsert
...
‎charinsert
tags.
charinsert
Á á Ć ć É é Í í Ĺ ĺ Ń ń Ó ó Ŕ ŕ Ś ś Ú ú Ý ý Ź ź
charinsert
results in
Clicking the links will have no effect since there is no input or edit field.
Combined characters
Combined characters are listed between the
‎<
charinsert
...
‎charinsert
tags and connected by the
sign.
charinsert
“+” ‘+’ «+» ‹+› „+“ ‚+‘ [[+]] {{+}}
charinsert
results in
“”
‘’
«»
‹›
„“
‚‘
[[]]
{{}}
Clicking the links will have no effect since there is no input or edit field.
Overriding display text
MediaWiki version:
1.38
Gerrit change 748823
A different display text can be specified in the
label
attribute (if you use this, you should use separate
charinsert
tags for each character in order to specify different display texts).
charinsert
label
"Latin A"
charinsert
charinsert
label
"Cyrillic А"
charinsert
charinsert
label
"Greek Alpha"
charinsert
results in
Latin A
Cyrillic А
Greek Alpha
Clicking the links will have no effect since there is no input or edit field.
Notes
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

to add new lines (\n).
Enclose white spaces in
‎<
nowiki
...
‎nowiki
tags when needed.
Add
‎<
charinsert
...
‎charinsert
tags into MediaWiki:Edittools.
Installation
and move the extracted
CharInsert
folder to your
extensions/
directory.
Developers and code contributors should install the extension
from Git
instead, using:
cd
extensions/
git
clone
Add the following code at the bottom of your
LocalSettings.php
file:
wfLoadExtension
'CharInsert'
);
If you use the
gadget
Edittools
, update its code to the
latest version
(≥ April 3, 2020)
Done
– Navigate to
Special:Version
on your wiki to verify that the extension is successfully installed.
Advanced Installation
Important:
You must have
Extension:Gadgets
for this to work.
Styling
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 2020-03-17
*/
mw-charinsert-buttons
border
px
solid
#aaa
margin-top
10
px
padding
px
font-size
1.1
em
text-align
center
mw-charinsert-buttons
background-color
#cde
!important
color
#000
border
thin
#069
outset
padding
px
px
font-weight
bold
font-size
0.9
em
text-decoration
none
mw-charinsert-buttons
hover
mw-charinsert-buttons
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.9
em
margin-left
px
padding-left
px
padding-right
px
Alternatively, you can choose a style closer to the
Wikimedia Design Style Guide
and the
WikimediaUI theme
/**
* Styling for links generated by [[MediaWiki:Edittools]] in WikimediaUI inspired theme.
* @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
* @updated 2020-03-17
*/
mw-charinsert-buttons
margin-top
px
border
px
solid
#c8ccd1
padding
px
px
px
font-size
1.1
em
text-align
center
mw-charinsert-buttons
background-color
#f8f9fa
!important
color
#202122
border
thin
#36c
outset
padding
px
px
font-size
0.9
em
font-weight
bold
text-decoration
none
mw-charinsert-buttons
hover
background-color
#fff
color
#404244
mw-charinsert-buttons
active
background-color
#c8ccd1
border-style
inset
client-js
mw-edittools-section
display
inline
client-js
mw-edittools-section
input
type
"button"
background-color
#f8f9fa
color
#202122
margin-left
px
border-radius
px
padding
px
px
font-size
0.9
em
/* Apply pointer cursor to all interactive elements. */
cursor
pointer
client-js
mw-edittools-section
input
type
"button"
hover
background-color
#fff
color
#404244
client-js
mw-edittools-section
input
type
"button"
active
background-color
#c8ccd1
color
#000
Scripting
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 all the
‎<
charinsert
...
‎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."
...
div
2. Wrap each individual block of charinserts into
‎<
tags like this:
class
"mw-edittools-section"
data-section-title
"Wiki-Syntax"
style
"display: none;"
...
Note:
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
English Wikipedia CharInsert menu
For implementing
CharInsert
menu like the one used on the English Wikipedia, either export gadgets:
Charinsert-core
Charinsert-styles
, and
Charinsert
and then import them on your own wiki through
Special:Import
or if you want to do it manually, copy the following four interface pages to your wiki:
MediaWiki:Gadget-charinsert-core.js (Wikipedia)
– Main JavaScript file.
MediaWiki:Gadget-charinsert-styles.css (Wikipedia)
– Creates surrounding boxes around the symbols/characters giving them the look of buttons.
MediaWiki:Gadget-charinsert.js (Wikipedia)
CharInsert
loader.
MediaWiki:Gadget-charinsert (Wikipedia)
– For the text shown in user preferences'
gadgets section
In your
MediaWiki:Gadgets-definition
, add the following definitions:
* charinsert[ResourceLoader|default|peers=charinsert-styles]|charinsert.js
* charinsert-core[ResourceLoader|hidden|dependencies=jquery.textSelection,user,mediawiki.storage]|charinsert-core.js
* charinsert-styles[ResourceLoader|hidden|type=styles]|charinsert-styles.css
MediaWiki:Edittools (Wikipedia)
– Only for users with JavaScript turned off or unsupported (which disables the WikiEditor extension too), therefore not really necessary or useful either. It only shows symbols/characters as simple text below the editor window, which can then be copy-pasted and thus be of some help to editors. Apparently, it does not get activated in English Wikipedia for disabled JavaScript.
Note:
This particular English Wikipedia character set also contains templates, which will need to be defined separately, if they are to be used on your wiki.
English Wikipedia Solution checked on:
November 6, 2018
This extension is being used on one or more
Wikimedia projects
. This probably means that the extension is stable and works well enough to be used by such high-traffic websites. Look for this extension's name in Wikimedia's
CommonSettings.php
and
InitialiseSettings.php
configuration files to see where it's installed. A full list of the extensions installed on a particular wiki can be seen on the wiki's
Special:Version
page.
This extension is included in the following wiki farms/hosts and/or packages:
Canasta
Fandom
Miraheze
ShoutWiki
Telepedia
wiki.gg
Retrieved from "
Categories
Stable extensions
Tag extensions
Page action extensions
Personalization extensions
BeforePageDisplay extensions
ParserFirstCallInit extensions
GPL licensed extensions
Extensions in Wikimedia version control
All extensions
Extensions used on Wikimedia
Extensions included in Canasta
Extensions included in Fandom
Extensions included in Miraheze
Extensions included in ShoutWiki
Extensions included in Telepedia
Extensions included in wiki.gg
Edit extensions
Hidden categories:
Extensions without an image
Extensions with release branches compatibility policy
Extension
CharInsert
Add topic