mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-09 02:15:32 +00:00
517e9d26f3
chore(web): improve the KeymanWeb integration documentation - replace use of `kmw` with `keyman` - unify pattern to load keyboards: do it in `keyman.init().then()` instead of in the document `onload` Part-of: keymanapp/keyman.com#449
2.4 KiB
2.4 KiB
| title |
|---|
| Manual Control - Custom Interface |
In this example, the web page designer has opted for their own user interface instead of the KeymanWeb interface. The keyboards in the selector are populated from the KeymanWeb list of keyboards. Please click this link to open the test page.
Code Walkthrough
Include the following script in the HEAD of your page:
<script>
var KWControl = null;
keyman.init().then(async function() {
// Load the keyboards of your choice here.
await loadKeyboards();
KWControl = document.getElementById('KWControl');
var kbds = keyman.getKeyboards();
for(var kbd in kbds) {
var opt = document.createElement('OPTION');
opt.value = kbds[kbd].InternalName + "$$" + kbds[kbd].LanguageCode;
opt.innerHTML = kbds[kbd].Name;
KWControl.appendChild(opt);
}
document.f.multilingual.focus();
keyman.setActiveKeyboard('', '');
});
/* KWControlChange: Called when user selects an item in the KWControl SELECT */
function KWControlChange() {
/* Select the keyboard in KeymanWeb */
var name = KWControl.value.substr(0, KWControl.value.indexOf("$$"));
var languageCode = KWControl.value.substr(KWControl.value.indexOf("$$"+2));
keyman.setActiveKeyboard(name, languageCode);
/* Focus onto the multilingual field in the form */
document.f.multilingual.focus();
}
</script>
Also include the following HTML code:
<head>
<!-- Load the KeymanWeb engine -->
<script src="https://s.keyman.com/kmw/engine/17.0.331/keymanweb.js" type="text/javascript"></script>
<!-- Load the your keyboard stubs here -->
<script src="unified_loader.js" type="text/javascript"></script>
<!-- ... -->
</head>
- File: unified_loader.js
And finally, include the keyboard SELECT and the clickable help img:
<!-- Display the KWControl selector with different keyboards listed -->
<p>Keyboard: <select id='KWControl' onchange='KWControlChange()'><option value=''>English</option></select>
On programmatically setting the keyboard:
On getting KeymanWeb's managed list of keyboards: