Merge pull request #15311 from keymanapp/docs/web/guide

This commit is contained in:
Eberhard Beilharz 2025-12-08 10:40:13 +01:00 • committed by GitHub
commit 026096fde4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 26 additions and 9 deletions

View file

@ -56,3 +56,5 @@ keyman.addKeyboards('french','sil_euro_latin@sv','sil_euro_latin@no')
```
This will install three keyboards - one for French (named, quite simply, "French") and two copies of the EuroLatin keyboard - one for Swedish and one for Norwegian.
[Previous: What is a Keyboard?](what-is-a-keyboard) | [Next: Additional Examples](examples/)

View file

@ -40,8 +40,8 @@ Also include the following HTML code:
```html
<head>
<!-- Load the KeymanWeb engine -->
<script src="https://s.keyman.com/kmw/engine/17.0.330/keymanweb.js" type="text/javascript"></script>
<script src="https://s.keyman.com/kmw/engine/17.0.330/kmwuitoggle.js" type="text/javascript"></script>
<script src="js/keymanweb.js" type="text/javascript"></script>
<script src="js/kmwuitoggle.js" type="text/javascript"></script>
<!-- // Also be sure to load your keyboards. Note that stubs will not work with this
// example without detailing paths precisely in the init() call's parameter.-->
</head>

View file

@ -19,8 +19,8 @@ The source code for the page may be seen below.
<meta charset="UTF-8">
<title>KeymanWeb - A First Example</title>
<script src='https://s.keyman.com/kmw/engine/17.0.330/keymanweb.js'></script>
<script src='https://s.keyman.com/kmw/engine/17.0.330/kmwuitoggle.js'></script>
<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>
(function() {
keyman.init({attachType:'auto'}).then(function() {
@ -38,16 +38,28 @@ The source code for the page may be seen below.
## The Breakdown
- The `<script>` inclusion `<script src='https://s.keyman.com/kmw/engine/17.0.330/keymanweb.js'></script>` loads the Keyman Engine for Web script for the page.
- 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(); });` 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.
- `(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/17.0.330/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 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.
- 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)

View file

@ -96,8 +96,9 @@ less suitable.
<p>The include for this interface is <code>&lt;script src="kmwuitoolbar.js"&gt;</code>.</p>
<p>To select where the interface will be displayed on your page, add the following element where desired: <code>&lt;div id="KeymanWebControl" display="block"&gt;&lt;/div&gt;</code>, as with the Button Interface above.</p>
<p>A live example of the KeymanWeb Toolbar Interface is available on the <a href="http://keymanweb.com">KeymanWeb Demo Site</a>. For information on how your site users will interact with the Toolbar Interface, <a href="../ui/ui-toolbar">click here</a>.</p>
</td>
</tr>
</table>
[Previous: Get Started](get-started) | [Next: What is a Keyboard?](what-is-a-keyboard)

View file

@ -11,3 +11,5 @@ The keyboards available for use with KeymanWeb have been developed by a wide ran
KeymanWeb supports a very wide range of languages, and many keyboards available for use with KeymanWeb include features specific to particular languages. Because of this, each keyboard has its own documentation, which is included with the On-Screen Keyboard. Although the level of detail in this documentation does vary somewhat, depending on the designer and the requirements of each keyboard, this is the first place to look for information on using a particular language with KeymanWeb.
[Index of help for KeymanWeb keyboard layouts](/keyboard)
[Previous: User Interface Design](user-interface-design) | [Next: Installing Keyboards](adding-keyboards)