Diskuze: DesignMode
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Ahoj,
prvne, rekl bych, ze je jasne co chces udelat, ale designMode pokud vim,
neslouzi na nic vic, nez nastaveni editovatelnosti objektu document .. .tedy je
to globalni obdoba contentEditable ... (s nadsazkou, oni se pry v nuancich
lisi). Kadopadne, pokud moje usilovne hledani vedlo k nejakemu vysledku, tak k
tomu, ze inputy neumi intepretovat stylovany text.
Ja bych doporucil udelat si vlastni input-like element, trebas klasickej <p> nebo <div> a nastavit mu contentEditable na true, pak si ho muze user editovat jak se mu zlibi a ve vhodnej okazik mu ho muzes zmenit tak, aby se html tagy zapracovaly na spravne misto.
1_ Muzes mu to delat pod rukama primo, rekneme na kazdej keyup mu to vezmes zkontrolujes a prepises ten element, (pripadne ho muzes poslat na server, ulozit do cashek, na localStorage - aby o obsah neprisel, kdyby se neco pokazilo), ale tohle editovani pod rukama skyta zakernej hacek - vzdycky kdyz mu ten element jakoby pod rukou prepises (zmenis innerHTML na text co pise on) tak se cursor (caret) presune na zacatek, dostat ten caret na konec je silnej pain, a taky entery pro odradkovani delaj trochu neporadek.
2_ Nebo je tu moznost mu to zmenit, az kdyz klikne na nejaky tlacitko, nebo kdyz klikne vedle, to neni spatna moznost - uvaz, ty si jeho zdrojovej text nekde nechas v nezmeneny podobe, on si to prohlidne najednou, kdyz se mu neco nelibi tak si zase klikne do textu, ty tam zase vratis jeho zdrojovou podobu (i s tagama) a on si vesele upravuje dal, muze psat texty jaky se mu zibej atd ... porad zustava pain s cursorem, ale ten se prave zakreje tim, ze on klikne vedle "inputu" a tim ten caret zmizne uplne, pri dalsim kliknuti bude caret, tam kde chce uzivatel, newline (enter) si budes asi muset stejne ohlidat.
Tvoje otazka me fakt zaujala, rekl jsem si ze neco takoveho bych si mohl
vyzkouset, takze pokud to dodelam, hodim sem odkaz na jsfiddle ... treba to
nekomu - tobe, nebo dalsim, pomuze, kdyz ne, zabavim se tim aspon ja 
Tak jsem tady s prvni verzi, ne ze by to bylo dokonaly, to ne, ma to jeden
fakt osklivej bug, nad kterym se ted jdu zamyslet pri hrani GTA V 
ale jak si odpocinu tak to snad
opravim.
https://jsfiddle.net/…ll/uc2nqesh/
Co to umi, v zasade je to takovej jakoby input element, do kteryho je mozny psat klasicky text, ale i html tagy.
Zkus si napsat neco, kliknout na HOTOVO a pak znova neco pripsat a pripadne zase ulozit (tady se ti objevi nekdy ten osklivej bug, kdy poslednim znakem se zda byt mezera, ale vetsinou dojde k jejimu prepsani prvnim dalsim znakem pri dalsi uprave - dost divny, ale jeste se na to podivam) co se tyka toho jak to funguje a proc je to komplikovanejsi nez obycejny dve funkce:
V zasade se clovek potyka s dvema problemy - prvni se objevi, kdyz zkusis kliknout do elementu a pokracovat v upravach, stane se divna vec, prave ten caret (cursor) se vzdycky presune na zacatek elementu, to je dost neprijemny, protoze clovek klepne doprostred "inputu" ale nemuze hned psat, musi tam kliknout znova. Proto jsem to tak trochu obesel tim, ze po tom, co klines na HOTOVO se ten element stane znovu needitovatelny a je to klasickej div/p/cokoliv si tam das to je jedno ... v okamziku kdy na nej najedes mysi, se do nej automaticky dosadi textova podoba toho tveho vstupu, abys zase mohl editovat i ty tagy a neztratil svoji praci a simuluje se funkci click() kliknuti do elementu, to je presne to jedno kliknuti, ktery potrebuje ten element proto, abys pri svem skutecnem kliknuti kamkoliv v "inputu" nasel caret prave na tom miste. Dost dulezite!
Navic jsem tam nastinil moznost revidovat zmeny, kdyz totiz pouzijes objekty, muzes treba udelat objekt Editor - do nej narves vsechny funkcionality a metody atd, ten bude mit v sobe dalsi objekt Content a ten zase bude udrzovat verze uprav, muzes tak vracet zmeny dokud bude stacit pamet atd, muzes se sam rozhodnout kolik zmen zpet dovolis, kam nastavis mez, jak rikam ja to reseni zatim jen naznacil. Ale prijde mi to jako dobra ficura.
Nakonec duvod, proc jsem to udelal takhle a ne realtime - kdyz pouzijes realtime techniku bude se do html vrstvy zapracovavat i nedokoncenej tag, prohlizec ho obvykle doplni, ale ... bordel silenej, to nechces, tvorit chaos a tvorit text jsou dve odlisny veci, zbytecne se pak chytat za hlavu, ze nejakej starsi prohlizec se chvoa trochu jinak, kdyz narazi na nauzavrenej tag, lepsi je to proste nechat usera psat a v momente, kdy se chce kouknout jak to vypada, ma k dispozici tlacitko HOTOVO - v podstate je to takovy tlacitko SAVE, protoze ulozi novou verzi textu.
Doufam, ze jsem to nejak nastinil, pred timhle jsem na necem podobnem nikdy nedelal, takze pokud by nekdo mel lepsi napad, budu rad kdyz ho sem napise, dost by me zajimalo, jak tohle resi vetsi profesionalove ...
Pro jistotu, sem ten zdrojak zkopiruju, kdyby nahodou na jsfiddle jednou
nebyl ten zdrojak dostupnej.
HTML
<div id="textInput">
</div>
<button id="showIt">
HOTOVO
</button>
<button id="back" disabled>
PREDCHOZI VERZE
</button>CSS
#textInput {
width: 500px;
height: 200px;
border: solid black;
padding: 1em;
border-radius: 5px;
overflow-y: scroll;
outline: 0;
margin-bottom: 15px;
}
#textInput:active,
#textInput:focus {
border: solid green;
}JS
var myInput = document.getElementById("textInput");
var okButton = document.getElementById("showIt");
var Content = {};
Content.versions = [];
Content.editable = true;
okButton.addEventListener("click", function() {
Content.versions.push(myInput.textContent);
myInput.innerHTML = Content.versions[Content.versions.length - 1];
Content.editable = false;
})
myInput.addEventListener("click", function() {
if (!Content.editable) {
this.textContent = Content.versions[Content.versions.length - 1];
Content.editable = true;
}
})
myInput.addEventListener("mouseover", function() {
myInput.contentEditable = true;
myInput.click();
})Martin Štěpánek :27.1.2016 20:05
No zrovna tohle nechci, protože jsem udělal podobnou. Ten můj každou
milisekundu vezme text z textarea a vloží jo do divu vedle - diky tomu při
tom, co píše vidí vedle náhled.
Uživatelé, kteří to budou používat pravděpodobně ani neumějí HTML
takže tam na to mají tlačítka, která jim vloží tagy
Proto se ptám na to aby to bylo hned v tom, toho že tagy nebudou ukončené se
díky tomu nebojím. Mohl by jsi to tedy zkusit tak, jak jsi zmiňoval, že v
tom bude chaos?
Neaktivní uživatel:27.1.2016 21:11
premyslel jsem ...a ne ze by to byl nejlepsi zpusob... ale kdybys ty dva elementy co mas na te sve strance dal pod sebe...input dolu a opacity na nulu tak krome toho, ze ztratis ten curet (nebude videt blikajici cursor) tak se to chova tak jak chces... jen si rikam jestli je to takhle opravdu tak super.. protoze, povaz...
cistej input -> kliknu na tlacitko strong a ono se to vlozi do inputu, jenze je to dvojice plnohodnotnych tagu, takze se okamzite schovaj a nejsou videt, protoze necekaj na nic proste se zapracujou do html toho view elementu, ty muzes psat jak je libo a je to uvnitr toho strongu, ale co kdyz chces uz nepsat strong? jak se nejak rozumne dostat ven? mozna zmenit chovani tech tlacitek tak aby po opetovnej stisku se teprve ten tag uzavrel... a celou dobu co je aktivni svitil... rozumis na co narazim?
maly demo co jsem jen tak rychle spichnul: https://jsfiddle.net/…ll/56h58o27/
jak zobrazit nebo simulovat cursor rozumnym zpusobem bohuzel nevim
+20 Zkušeností
+2,50 Kč
Martin Štěpánek :27.1.2016 21:41
Super přesně tohle potřebuji, jediné co potřebuji je ještě ten cursor.
Ono mně by nevadil, ale ti
co to píšou mohou být zmatení...
Jinak dík
Martin Štěpánek :27.1.2016 21:59
Aha jo vidíš toho jsem si nevšiml, protože jsem na tabletu no - pokusím
se
Martin Štěpánek :27.1.2016 22:04
Tak jak na to koukám teď, tak vše funguje jak má - nebo to alespoň tak
vypadá Nic mi to nežere,
vkládání jde, označovat jde, kurzor je vidět, tagy jdou...
Teď otázka jestli vše funguje i na počítači...
Neaktivní uživatel:28.1.2016 0:36
Tak jsem se snad naposledy zamyslel, uvedomil jsem si ze uvaha byla od
zacatku spatna - neni treba aktualizovat a vyhodnocovat kazdou zmenu, jen
takovou, ktera si to zada, to znamena, ze idealne se do innerHTML editovatelneho
elementu bude zapisovat jen pouze tehdy, pokud dojde ke stisknuti tlacitka na
tom tvem panelu, nebo pokud nekdo napise kompletni html tag (kompletni znamena,
otevre ho , zavre ho a zavre taky vsechny jeho deti ... jelikoz me to docela
dost bavi, hned jak budu mit dneska rano cas tak se tomu budu venovat a predelam
to do funkcni a slusny podoby... a verim tomu, ze ted uz bude fungovat naprosto
vsechno
Zobrazeno 18 zpráv z 18.