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