• Jodit
  • PRO
  • Builder
  • Getting Started
  • Playground
  • Examples
  • Documentation
  • Download
  • Overview
  • Issue tracker
  • Docs
  • Plugins
  • Demo
  • Pricing
  • File Browser Pro
  • Sign in
Get connected wth us on social networks!

Footer

Jodit Core

  • Jodit Home page
  • Documentation
  • Playground
  • Examples
  • Github
  • Issues

Integration

  • Jodit React
  • Jodit Angular
  • Jodit Vue
  • Jodit Yii2
  • Jodit Joomla

PRO/OEM plugins

  • AutoComplete
  • Backup Plugin
  • Button Generator
  • Change case
  • Custom Color Picker
  • Emoji
  • Finder
  • Google Search
  • Paste code
  • Show Blocks
  • Virtual Keyboard
  • Tune block
  • Highlight signature
  • Google Maps Editor
  • Export in PDF
  • Page Break
  • Iframe Editor
  • Paste from Word PRO
  • Mobile View
  • ToDo List
  • Translate

Links

  • Demo PRO/OEM
  • Demo FileBrowser PRO
  • Price
  • License
  • Support
  • For resellers

Versions

  • site v.0.1.810
  • Jodit PRO v.4.6.4
  • Jodit v.4.6.2
  • All versions
2025 © Copyright: XDSoft.net <support@xdsoft.net>
  • Getting started

    • Installation
    • Usage
    • Support
    • FAQs
    • Cloud
    • Examples
  • How to

    • Create plugin
    • Add custom button
    • Add custom font in the font list
    • How to create module
    • How to generate license key
    • How to make a backend finder
    • How to set up document view
  • Modes

    • Source mode
  • Customisation

    • Theme
    • Keyboard
  • API

    • License Rest API
    • JS API
  • Changelog

  • Plugins

    • AutoComplete
    • Backup Plugin
    • Button Generator
    • Change case
    • Custom Color Picker
    • Emoji
    • Finder
    • Google Search
    • Paste code
    • Show Blocks
    • Virtual Keyboard
    • Tune block
    • Highlight signature
    • Google Maps Editor
    • Export in PDF
    • Page Break
    • Iframe Editor
    • Paste from Word PRO
    • Mobile View
    • ToDo List
    • Translate

Virtual Keyboard plugin

Allows you to open the virtual keyboard and enter data using the mouse.

It also allows you to set a series of buttons with hot keys, which will enter the character specified for them. Can be used for languages that do not have a proper keyboard.

Example

<textarea id="editor1"></textarea> <script> const editor = Jodit.make('#editor1', { buttons: [ 'keyboard', { group: 'custom', buttons: [] } ] keyboard: { extraKeyGroup: 'custom', extraKeyButtons: [ { key: 'λ', hotkey: 'ctrl+1' }, 'β' // Will have hotkey alt+2 ] } }); editor.execCommand('toggleKeyboard'); // Show virtual keyboard editor.execCommand('toggleKeyboard'); // Hide virtual keyboard </script>
Copy

Options

layoutList

Dictionary of language keyboard layouts of the form:

interface ILayoutKeys { title: string; keys: string[][]; }
Copy

Where characters are separated by a space

  • First character by default
  • The second one when you press the Shift button
  • Third when you click the Options button
Example
<textarea id="editor2"></textarea> <script> const editor = Jodit.make('#editor2', { keyboard: { defaultLayoutSet: 'ru', layoutList: { tata: { title: 'Russian language', // prettier-ignore key: [ ['` ~ ±', '1 ! §', '2 @ "', '3 # :', '4 $ <', '5 % >', '6 ^', '7 &', '8 *', '9 (', '0 )', '- _', '= +', 'Backspace'], ['Tab', 'й Й', 'ц Ц', 'у У', 'к К', 'е Е', 'н Н', 'г Г', 'ш Ш', 'щ Щ', 'з З', 'х Х [', 'ъ ] {', '\\ | }'], ['Caps', 'ф Ф', 'ы Ы', 'в В', 'а А', 'п П', 'р Р', 'о О', 'л Л', 'д Д', 'ж Ж ;', 'э Э \'', 'Enter'], ['Shift', 'я Я', 'ч Ч', 'с С', 'м М', 'и И', 'т Т', 'ь Ь', 'б Б ,', 'ю Ю .', '/ ?', 'Shift'], ['Options', 'Space', 'Options'], ] // prettier-ignore-end } } } }); </script>
Copy

defaultLayoutSet (default 'en')

Set layout language by default.

Example
<textarea id="editor2"></textarea> <script> const editor = Jodit.make('#editor2', { keyboard: { defaultLayoutSet: 'ru' } }); </script>
Copy

showLayoutSwitcher (default: true)

Show keyboard layout selection buttons in the header of the virtual keyboard.

layoutSwitchList (default: ['en', 'es', 'de', 'ru', 'tr', 'iw', 'tata'])

Example
<textarea id="editor3"></textarea> <script> const editor = Jodit.make('#editor3', { keyboard: { layoutSwitchList: ['ru', 'tata'], defaultLayoutSet: 'tata' } }); </script>
Copy

Screenshots

Demo

Full demo including Premium Plugins! 

These examples display all of the plugins available with Jodit Editor PRO/OEM version.

Jodit Editor

Framework  plugins Complete  documentation Examples 
Try play