Add convenience methods for runtime (un)registration and a sample
This commit is contained in:
parent
843d2d5b1f
commit
3a8919c260
84
samples/grammar-on_off.html
Normal file
84
samples/grammar-on_off.html
Normal file
@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BesService Run-time Grammar On/Off Example</title>
|
||||
<link rel="stylesheet" href="../styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
|
||||
<script>const besUrl = 'http://localhost:225/api/v2';</script>
|
||||
<script src="../service.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p class="my-block">This is an example how to implement dynamic registration and deregistration of a grammar checking service on supported HTML controls.</p>
|
||||
<p class="my-block"><input id="toggle_grammar_service" type="checkbox" onchange="toggle_grammar_service(this)"/> <label for="toggle_grammar_service">Check grammar as you type</label></p>
|
||||
|
||||
<h1 class="my-block"><textarea> Control</h1>
|
||||
<div class="my-block">
|
||||
<textarea id="textarea-control" class="my-control">Tukaj vpišite besedilo ki ga želite popraviti.
|
||||
|
||||
Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.
|
||||
|
||||
To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.
|
||||
|
||||
Na mizo nisem položil knjigo.
|
||||
|
||||
Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</textarea>
|
||||
</div>
|
||||
|
||||
<h1 class="my-block"><div contenteditable="true"> Control</h1>
|
||||
<div id="contenteditable-control" class="my-block my-control" contenteditable="true">
|
||||
<p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
|
||||
<p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
|
||||
<p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
|
||||
<p>Na mizo nisem položil knjigo.</p>
|
||||
<p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
|
||||
</div>
|
||||
|
||||
<h1 class="my-block">Static Content</h1>
|
||||
<div id="readonly-control" class="my-block my-control">
|
||||
<p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
|
||||
<p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
|
||||
<p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
|
||||
<p>Na mizo nisem položil knjigo.</p>
|
||||
<p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
|
||||
</div>
|
||||
|
||||
<h1 class="my-block">CKEditor Control</h1>
|
||||
<div class="my-block">
|
||||
<div id="ckeditor-control">
|
||||
<p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
|
||||
<p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
|
||||
<p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
|
||||
<p>Na mizo nisem položil knjigo.</p>
|
||||
<p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<bes-popup-el/>
|
||||
|
||||
<script>
|
||||
let my_ckeditor = null
|
||||
ClassicEditor.create(document.querySelector('#ckeditor-control'))
|
||||
.then(editor => my_ckeditor = editor)
|
||||
.catch(error => alert(error))
|
||||
|
||||
function toggle_grammar_service(el) {
|
||||
if (el.checked) {
|
||||
BesService.registerByElement(document.getElementById('textarea-control'))
|
||||
BesService.registerByElement(document.getElementById('contenteditable-control'))
|
||||
BesService.registerByElement(document.getElementById('readonly-control'))
|
||||
if (my_ckeditor)
|
||||
BesCKService.register(my_ckeditor.ui.view.editable.element, my_ckeditor)
|
||||
} else {
|
||||
BesService.unregisterByElement(document.getElementById('textarea-control'))
|
||||
BesService.unregisterByElement(document.getElementById('contenteditable-control'))
|
||||
BesService.unregisterByElement(document.getElementById('readonly-control'))
|
||||
if (my_ckeditor)
|
||||
BesService.unregisterByElement(my_ckeditor.ui.view.editable.element)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
47
service.js
47
service.js
@ -69,6 +69,29 @@ class BesService {
|
||||
besServices.push(this)
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers grammar checking service for given DOM element.
|
||||
*
|
||||
* Note: CKEditor controls are an exception that may not be registered using this method. Use
|
||||
* BesCKService.register for that.
|
||||
*
|
||||
* @param {Element} hostElement Host element
|
||||
* @returns Grammar checking service registered for given DOM element; unfedined if no service
|
||||
* registered.
|
||||
*/
|
||||
static registerByElement(hostElement) {
|
||||
if (hostElement.tagName === 'TEXTAREA') {
|
||||
return BesTAService.register(hostElement)
|
||||
} else if (
|
||||
hostElement.getAttribute('contenteditable')?.toLowerCase() ===
|
||||
'plaintext-only'
|
||||
) {
|
||||
return BesDOMPlainTextService.register(hostElement)
|
||||
} else {
|
||||
return BesDOMService.register(hostElement)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregisters grammar checking service.
|
||||
*/
|
||||
@ -98,6 +121,15 @@ class BesService {
|
||||
return besServices.find(service => service.hostElement === hostElement)
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregisters grammar checking service
|
||||
*
|
||||
* @param {Element} hostElement Host element
|
||||
*/
|
||||
static unregisterByElement(hostElement) {
|
||||
BesService.getServiceByElement(hostElement)?.unregister()
|
||||
}
|
||||
|
||||
/**
|
||||
* Called initially when grammar-checking run is started
|
||||
*/
|
||||
@ -2094,16 +2126,7 @@ customElements.define('bes-popup-el', BesPopup)
|
||||
|
||||
// Auto-register all elements with bes-service class.
|
||||
window.addEventListener('load', () => {
|
||||
document.querySelectorAll('.bes-service').forEach(hostElement => {
|
||||
if (hostElement.tagName === 'TEXTAREA') {
|
||||
BesTAService.register(hostElement)
|
||||
} else if (
|
||||
hostElement.getAttribute('contenteditable').toLowerCase() ===
|
||||
'plaintext-only'
|
||||
) {
|
||||
BesDOMPlainTextService.register(hostElement)
|
||||
} else {
|
||||
BesDOMService.register(hostElement)
|
||||
}
|
||||
})
|
||||
document
|
||||
.querySelectorAll('.bes-service')
|
||||
.forEach(hostElement => BesService.registerByElement(hostElement))
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user