| Autor | Zpráva | ||
|---|---|---|---|
| dedek Profil * |
#1 · Zasláno: 29. 8. 2019, 23:32:55
Ahoj, tady jsem našel, jak vytvořit WYSIWYG editor.
Vlastní jednoduchý WYSIWYG editor Pokud do něj vložím <h1>Nadpis</h1>
a kliknu na Zobrazit HTML, dostanu výsledek <h1>Nadpis</h1> Musí se někde něco nastavit abych dostal výsledek <h1>Nadpis</h1> Díky za info |
||
| Radek9 Profil |
#2 · Zasláno: 29. 8. 2019, 23:36:14
dedek:
Co je cílem? Aby se na HTML stránce vypsal Nadpis, nebo text <h1>Nadpis</h1>?
Pokud první možnost, tak jdeš trochu proti smyslu wysiwygu. Pokud druhá možnost, tak ty tvoje „paznaky“ jsou úplně obyčejné HTML entity, díky kterým se ten kód nereprezentuje jako HTML, ale vypíše se jako obyčejný text. < je ve skutečnosti entita pro < a > je entita pro >.
|
||
| dedek Profil * |
#3 · Zasláno: 29. 8. 2019, 23:48:30
Radek9:
Cílem je aby se na stránce vypsal Nadpis, čili v html bude <h1>Nadpis</h1>
|
||
| Keeehi Profil |
#4 · Zasláno: 30. 8. 2019, 01:32:31
dedek:
Hlavní práci v tom editoru vykonává funkce execCommand. Jak je dole ukázáno (sekce: Použití ovládacích tlačítek), dá se jí předat jako parametr třeba text bold a v editoru se pak píše tučně. Když si pak najdeš dokumentaci funkce execCommand, a podíváš se, jaké všechny "příkazy" se jí dají předat, najdeš tam i heading. Takže si vytvoříš tlačítko, které ti bude přidávat nadpisy.
Obecně WYSIWYG není určen k tomu, aby jsi tam sám ručně vytvářel HTML kód. Proto se veškeré vstupy berou jako prostý text, tudíž se znaky < a > převedou na entity, právě proto aby nebyly interpretovány jako HTML tagy ale jako obyčejný text. |
||
| dedek Profil * |
#5 · Zasláno: 30. 8. 2019, 13:09:07
Jinak řečeno celá funkce execCommand() je tak akorát dobrá na dvě věci.
Existuje nějaká jiná funkce která uživatele nikterak neomezuje v tom co chce nebo nechce vytvořit? Děkuji |
||
| Radek9 Profil |
dedek:
„Jinak řečeno celá funkce execCommand() je tak akorát dobrá na dvě věci.“ Absolutně špatně. „Existuje nějaká jiná funkce která uživatele nikterak neomezuje v tom co chce nebo nechce vytvořit?“ Co tím chtěl básník říct? Tak znovu: Smyslem WYSIWYGu (What You See Is What You Get - Co vidíš, to dostaneš), jak název napovídá, je upravovat obsah v podobě, ve které potom bude rovnou k vidění na webu. Pokud tedy do wysiwygu napíšeš text „<h1>Nadpis</h1>“, zobrazí se ti přesně text „<h1>Nadpis</h1>“. Pokud chceš udělat z nějakého textu nadpis, použiješ funkci execCommand:
<button id="heading">Nadpis</button>
<div id="editor" contenteditable="true">Označ mě a klikni na tlačítko</div>
<script>
document.getElementById('heading').onclick = function () {
document.getElementById('editor').focus()
document.execCommand('formatBlock', false, '<h1>')
}
</script>Živá ukázka |
||
| dedek Profil * |
Fajn, tak nechci WYSIWYG editor, chci HTML editor. Chci mazat, psát atd.. přímo html kód a to nejdůležitější, chci označit text a tlačítkem ho obalit předem nastavenými elementy. Díky
Tedy co uvidím v tom editoru, to bude i ve zdrojovém kódu HTML stránky |
||
| Taps Profil |
#8 · Zasláno: 31. 8. 2019, 12:02:28
dedek:
TAk proč nevyzkoušíš přímo nějaký WYSIWYG editor typu tinymce, CKEditor |
||
| dedek Profil * |
#9 · Zasláno: 31. 8. 2019, 22:38:14
Tak vyřešeno pomocí funkce replace. Díky
|
||
|
Časová prodleva: 5 let
|
|||
0