mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-05 08:25:32 +00:00
c1113ac21d
Some checks failed
Keyman Build Summary / Summarize build status checks (push) Has been cancelled
Also change a few places that I missed.
63 lines
2.5 KiB
Markdown
63 lines
2.5 KiB
Markdown
---
|
|
title: Getting Started With KeymanWeb
|
|
---
|
|
|
|
## Prerequisite
|
|
|
|
- First, if you have not yet obtained a copy of KeymanWeb, please visit [the KeymanWeb Developer Home](https://keyman.com/developer/keymanweb/). A link to the "https minified" version of the code will be used here.
|
|
|
|
## Demo
|
|
|
|
To setup a basic first page with KeymanWeb, only two lines of code are necessary, but a few more lines will be shown here. Open [an example page](examples/__first-example.html).
|
|
|
|
The source code for the page may be seen below.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>KeymanWeb - A First Example</title>
|
|
|
|
<script src='https://s.keyman.com/kmw/engine/18.0.245/keymanweb.js'></script>
|
|
<script src='https://s.keyman.com/kmw/engine/18.0.245/kmwuitoggle.js'></script>
|
|
<script>
|
|
keyman.init({attachType:'auto'}).then(async function() {
|
|
await keyman.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
|
|
await keyman.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>Click me and type: <input placeholder="Hello World"/></p>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## The Breakdown
|
|
|
|
- The `<script>` inclusion `<script
|
|
src='https://s.keyman.com/kmw/engine/18.0.245/keymanweb.js'></script>` loads the Keyman Engine
|
|
for Web script for the page.
|
|
|
|
- `(function() { ... keyman.init( ... ); ... })(keyman);` serves to initialize the web engine with default settings.
|
|
By adding the object `{attachType:'auto'}` as a parameter to our `keyman.init()` call, the
|
|
KeymanWeb engine will then link into any detected input elements automatically, regardless of
|
|
browser or device, as part of its initialization.
|
|
|
|
- The other `<script>` inclusion, `<script
|
|
src='https://s.keyman.com/kmw/engine/18.0.245/kmwuitoggle.js'></script>`, creates the language
|
|
menu seen on non-mobile devices and the on-screen keyboard toggle button. For other options,
|
|
see our [User Interface Design](user-interface-design) page.
|
|
|
|
- The calls to `keyman.addKeyboards()` in the source above link in the two example Keyman
|
|
keyboards used in this demo from our CDN server. For more info on how to include keyboards in
|
|
your KeymanWeb installation, check the [Adding Keyboards](adding-keyboards) page.
|
|
|
|
## API References
|
|
|
|
- On initialization: [`keyman.init()`](../reference/core/init).
|
|
|
|
- On including keyboards: [`keyman.addKeyboards()`](../reference/core/addKeyboards).
|
|
|
|
[Next: User Interface Design](user-interface-design)
|