Skip to main content

Character picker

What it does

This plugin adds a character picker to Xeditor. It is used to insert special characters.

Installation

First you have to switch into your project location using the command line.

cd path/to/your/project

Now you should be in the same directory as the package.json file. Then you can install the plugin as follows:

npm install @xeditor/plugin-characterpicker --save --registry https://npm.xeditor.com

Configuration

The demo configuration in plugins.js looks like this:

{
pluginId: 'characterpicker',
ptype: 'uxxeditorcharacterpicker',
characterImagePath: 'img/characters',
defaultCharsets: {
'utf8': { // default charset
path: './charsets/utf8/charset.json'
},
'my_new_charset': { // custom charset
path: './charsets/my_new_charset/charset.json'
}
},
charsets: [
'utf8', // default charset
'my_new_charset' // custom charset
]
}

Note: my_new_charset is a custom charset, thats being added as an example in Adding Charsets.

Charsets and Subsets

In src/js/static/charsets/utf8:

  • charset.json contains the charsets and subsets
  • de.js and en.js contain the displayed informations (when omitted the names inside charset.json are being used)

Adding Subsets

This is how you add your own subsets to utf8 in charset.json:

{
"utf8": {
"foo_bar": { // use `xeditor.charset.utf8.foo_bar` in `en.js` to define a name for this charset
"foo": [ // use `xeditor.charset.utf8.foo` in `en.js` to define a name for this subset
{
"cpt": "0057", // U+0057
"name": "LATIN CAPITAL LETTER W" // the info
},
{
"cpt": "00CC",
"name": "LATIN CAPITAL LETTER I WITH GRAVE"
},
{
"cpt": "0114",
"name": "LATIN CAPITAL LETTER E WITH BREVE"
},
{
"cpt": "0020",
"name": "SPACE"
}
],
"bar": [
{
"cpt": "0372",
"name": "GREEK CAPITAL LETTER ARCHAIC SAMPI"
},
{
"cpt": "0398",
"name": "GREEK CAPITAL LETTER THETA"
},
{
"cpt": "053C",
"name": "ARMENIAN CAPITAL LETTER LIWN"
},
{
"cpt": "0582",
"name": "ARMENIAN SMALL LETTER YIWN"
},
]
},
"duplicates": {
"0020": [ // now SPACE is inside the subset "foo" and "bar" but is only stored once (inside "foo")
[
"utf8",
"foo_bar",
"bar"
]
]
},
"subsetOrder": [ // the order in which the charsets/subsets should be shown to the user
"foo_bar",
"foo",
"bar"
]
}
}

To add a translation you have to add the following to en.js:

(function($){
$['xeditor.charset.utf8.foo_bar'] = 'Foo Bar';
$['xeditor.charset.utf8.foo'] = 'Foo';
$['xeditor.charset.utf8.bar'] = 'Bar';
})(global_phrases);

Adding Charsets

If you want to add another charset like utf8 you can do so by:

  1. create folder(s) src/js/static/charsets/my_new_charset and create charset.json inside
  2. do the exact same as in Adding Subsets (of course you replace the 'utf8' with 'my_new_charset')
  3. configure the new charset inside plugins.js as shown in Configuration
  4. to display the new charset now you need to configure a new characterpicker-button inside your toolbar.js because each characterpicker is bound to one charset
{
extend: 'xeditor.characterpicker',
data: {
charset: 'my_new_charset'
}
}

API

The API for the plugin can be found here: characterpicker plugin API