Mecha CMS

Mecha CMS blog and documentation.

Foreign Keyboard

Updated: Sunday, 07 August 2016

Foreign keyboard madness.

I’m currently working on addressing the foreign keyboard bug in the [<strong>Text Editor</strong>][article:post-editor-customization] plugin. The current development version of this editor can be tested here:

I need help. I don’t have any foreign keyboard settings in my laptop so if you are from China, India, Japanese, Russia, Saudi Arabia, … then that would be great! Because you have a very unique keyboard key order and key code.

The solution I came up with is to use the new JavaScript API called KeyboardEvent.key which hasn’t been implemented yet in most browsers. When I first writing this article, the KeyboardEvent.key API is only available in the latest Firefox browser. Browsers that don’t support KeyboardEvent.key will use the deprecated KeyboardEvent.keyCode and KeyboardEvent.which API to handle the auto–completion and keyboard shortcut feature.

Users with a standard keyboard key like me don’t have any problems with KeyboardEvent.keyCode and KeyboardEvent.which implementation until now.

Here are some changes in the text editor plugin for future release you have to know:

  • Added option to enable/disable the auto–completion feature with config.autoComplete
  • Added option to enable/disable the auto–indentation feature with config.autoIndent
  • Added option to enable/disable SEText header style in MTE with config.enableSETextHeader
  • The shortcut API is now easier to develop because you will use the key value to define which key was pressed, not with the key code. e.g. myEditor.shortcut('ctrl+f', fn) is now replaces myEditor.shortcut('ctrl+70', fn)
  • Added option to add title attribute in MTE image prompt
  • Added option to add caption in HTE image prompt which will produce <figure> element with <img> and <figcaption> in it
  • Added ability to automatically set rel="nofollow" and target="_blank" attribute in anchor link with external URL in HTE link prompt output
  • Move all modal buttons text from config.buttons to config.actions
  • Change default custom-modal-action class to custom-modal-footer.
Donation and Email Subscription