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