V neděli 26. května lze navštívit Maker Faire Rychnov nad Kněžnou, festival plný workshopů, interaktivních činností a především nadšených a zvídavých lidí.
Byla vydána nová stabilní verze 3.20.0, tj. první z nové řady 3.20, minimalistické linuxové distribuce zaměřené na bezpečnost Alpine Linux (Wikipedie) postavené na standardní knihovně jazyka C musl libc a BusyBoxu. Z novinek lze vypíchnou počáteční podporu 64bitové architektury RISC-V.
Společnost Jolla na akci s názvem Jolla Love Day 2 - The Jolla comeback představila telefon se Sailfish OS 5.0 Jolla Community Phone (ve spolupráci se společností Reeder) a počítač Jolla Mind2 Community Edition AI Computer.
LibreOffice 24.8 bude vydán jako finální v srpnu 2024, přičemž LibreOffice 24.8 Alpha1 je první předběžnou verzí od začátku vývoje verze 24.8 v prosinci 2023. Od té doby bylo do úložiště kódu odesláno 4448 commitů a více než 667 chyb bylo v Bugzille nastaveno jako opravené. Nové funkce obsažené v této verzi LibreOffice najdete v poznámkách k vydání.
Nová čísla časopisů od nakladatelství Raspberry Pi: MagPi 141 (pdf) a HackSpace 78 (pdf).
Byla vydána verze 2.0.0 programovacího jazyka Kotlin (Wikipedie, GitHub). Oficiálně bude představena ve čtvrtek na konferenci KotlinConf 2024 v Kodani. Livestream bude možné sledovat na YouTube.
Byla vydána nová major verze 27.0 programovacího jazyka Erlang (Wikipedie) a související platformy OTP (Open Telecom Platform, Wikipedie). Přehled novinek v příspěvku na blogu.
Byla vydána nová verze 1.8.0 svobodného multiplatformního softwaru pro konverzi video formátů HandBrake (Wikipedie). Přehled novinek v poznámkách k vydání na GitHubu. Instalovat lze také z Flathubu.
Microsoft představil nové označení počítačů Copilot+. Dle oznámení se jedná se o počítače poskytující funkce umělé inteligence. Vedle CPU a GPU mají také NPU (Neural Processing Unit). Uvnitř představených Copilot+ notebooků běží ARM čipy Qualcomm Snapdragon X Elite nebo X Plus.
Příspěvek na blogu Codean Labs rozebírá zranitelnost CVE-2024-4367 v PDF.js, tj. mj. prohlížeči PDF souborů ve Firefoxu. Při otevření útočníkem připraveného pdf souboru může být spuštěn libovolný kód v JavaScriptu. Vyřešeno ve Firefoxu 126.
Na čo je vlastne na webe takýto editor dobrý? Web je cely formátovaný, farbený a inak prečačkaný... používateľom sa to páči a priťahuje ich to. Prečo by teda kvalitný web-dizajnér nemohol ponúknuť svojím zákazníkom k ohromujúcemu webu aj ohromujúce možnosti používateľského vstupu?
Možno aj váš šéf bude potešený vaším najnovším vylepšením firemného informačného systému, alebo webovej služby vašej spoločnosti.
Pred tým, ako začneme preberať problematiku z technického hľadiska, rozšírme si o nej svoj všeobecný rozhľad. To, čo sa budeme snažiť implementovať, je takzvaný WYSIWYG editor (What You See Is What You Get - To čo vidíš, to aj dostaneš). Počas editovania a formátovania textu v takomto editore vidíme dokument vždy vo výslednej podobe (nie v nejakom druhu zdrojového textu).
MS Internet Explorer bol prvý webový prehliadač, ktorý obsahoval WYSIWYG editor. Prvým open source prehliadačom bol Mozilla Suite 1.3b, ktorý obsahoval editor nazvaný Midas. Kód, ktorý si dnes ukážeme, bude určený práve pre prehlidač Mozilla Firefox a jeho editor Midas. Portovať tento kód na MSIE nie je zložité a neskôr si vysvetlíme, ako pri portovaní postupovať.
Midas (a implementácia MS) pracuje nad HTML dokumentom - výstup teda bude
HTML dokument. Najjednoduchší spôsob, ako si tento editor odskúšať, je
vytvoriť html súbor s nasledovným kódom (i_am_editable.html
):
<html>
<head>
<title>Moj prvy WYSIWYG editor</title>
<script type="text/javascript">
function setup() {
document.designMode = 'on';
}
</script>
</head>
<body onload="setup();">
<b>Ahoj!</b> Ja som tvoj prvy webovy WYSIWYG editor.
</body>
</html>
Súbor otvorte vo Firefoxe. Po načítaní stránky prehliadač vykoná
javascriptovú funkciu setup()
. Tá jediným príkazom spustí nad
stránkou editor. Po zobrazení obsahu stránky kliknite do textu a
môżete začať editovať.
Čo vlastne funkcia setup()
vykoná? Nastaví hodnotu premennej
designMode
objektu document
na
'on'
. Objekt document
reprezentuje HTML dokument,
v ktorom je JavaScript implementovaný (umiestnený).
V praxi však nechceme editovať kompletne celú stránku, len text v textovom
poli. Midas pracuje nad celým HTML dokumentom a nie je možné mu podať
textové pole (tag <textarea>
).
Preto editovateľnú stránku vložíme do vnoreného rámca na stránke pomocou
tagu <iframe>
. Do rámca potom môžeme načítať (pomocou
atribútu src
) ľubovoľnú stránku ako predlohu. Nad stránkou v
rámci po jej načítaní spustíme editor Midas a užívateľ bude môcť editovať
len obsah v rámci.
Stránka v rámci by z rôznych dôvodov sama nad sebou editor spúšťať nemala. Editor spustíme nad dokumentom v rámci z "hlavnej stránky", na ktorej sa rámec s editorom má nachádzať:
editor.html:
<html>
<head>
<title>Moj druhy WYSIWYG editor</title>
<script type="text/javascript">
var editor;
function setup() {
editor = document.getElementById('editor');
editor.contentWindow.document.designMode='on';
}
</script>
</head>
<body onload="setup();">
<p>Tento text nie je editovatelny... editujte obsah v ramci, prosim.</p>
<iframe id="editor" src="template.html"></iframe>
<p>Dakujem za pochopenie.</p>
</body>
</html>
template.html:
<html>
<head>
<title>Moj prvy WYSIWYG editor</title>
</head>
<body>
<b>Ahoj!</b> Ja som tvoj druhy webovy WYSIWYG editor.
</body>
</html>
Midas počas editácie textu generuje HTML kód editovaného dokumentu, ktorý
je v každej chvíli prístupný z JavaScriptu. K tomuto HTML kódu budeme chcieť
pristupovať z JavaScriptu na vonkajšej stránke (editor.html
).
Na vonkajšiu stránku totiž budeme chcieť umiestniť niečo ako nástrojový
panel.
Ukážem vám, ako to myslím. Vytvoríme si tlačidlo, na ktoré keď klikneme
myškou, zobrazí sa dialógové okno so zdrojovým textom editovaného
dokumentu. Pridame na stránku JavaScript, ktorý zdrojový kód dokumentu
vytiahne z rámca a predá ho ako argument funkcii alert()
,
ktorá zobrazí dialóg (editor.html
):
<html>
<head>
<title>Moj druhy WYSIWYG editor</title>
<script type="text/javascript">
var editor;
function setup() {
editor = document.getElementById('editor');
editor.contentWindow.document.designMode='on';
}
function editor_alert() {
alert(editor.contentWindow.document.body.innerHTML);
}
</script>
</head>
<body onload="setup();">
<p>Tento text nie je editovatelny... editujte obsah v ramci, prosim.</p>
<iframe id="editor" src="template.html"></iframe>
<p>Nastrojovy panel:</p>
<ul>
<li><a href="javascript: editor_alert();">Ukaz mi to HTML!</a></li>
</ul>
</body>
</html>
Dnes sme si vysvetlili, ako postaviť na nohy jednoduchý editor vo
vnútri prehliadača. Tento editor zatiaľ neponúka široké možnosti
formátovania textu a dokument nevieme nikam uložiť ani odoslať. Nabudúce
sa naučíme využívať funkciu document.execCommand()
na
formátovanie textu a dokument odoslať na server.
Skúsenejší čitatelia, ktorí bažia po ďalších informáciách, isto ocenia, ak ich upozorním na kvalitný open source WYSIWYG editor - OpenWYSIWYG. OpenWYSIWYG je jednoducho nasaditeľný a obratný editor. Podporuje prehliadače Mozilla Firefox aj MSIE. Jeho zdrojové kódy isto poslúžia skúseným čitateľom k úžitku a rozšíria obzor ich znalostí.
Nástroje: Tisk bez diskuse
Tiskni Sdílej:
<tucny>texttext</tucny>atd.? Nejde sice o WYSIWYG editor, ale nedá mi to, se nezeptat.
background-color
vůbec neodešle). Jinak ale super a tyhle věci třeba také půjdou nějak vychytat.