Avatar
Martin Štěpánek (Enormyk):

Ahoj,
Nevíte jak udělat, aby klasický textarea měl zapnutou vlastnost designMode? Jde o to, aby když napíši

<strong>nějaký text </strong>

viděl **nějaký text ** a ne tu značku strong.

Odpovědět 27. ledna 8:26
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Martin Štěpánek (Enormyk):

Abych viděl tučný text :-)

Nahoru Odpovědět 27. ledna 8:27
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Taskkill
Redaktor
Avatar
Taskkill:

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 :)

 
Nahoru Odpovědět  +2 27. ledna 16:33
Avatar
Nahoru Odpovědět 27. ledna 18:36
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Taskkill
Redaktor
Avatar
Taskkill:

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 :D 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();
})
 
Nahoru Odpovědět 27. ledna 19:37
Avatar
Odpovídá na Taskkill
Martin Štěpánek (Enormyk):

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? :)

Nahoru Odpovědět 27. ledna 20:05
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Nahoru Odpovědět 27. ledna 20:09
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Filip Šohajek
Redaktor
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Filip Šohajek:

Lepší metoda by byla poslouchat na DOM eventy na té textarea než periodicky vytěžovat procesor celkem náročnou funkcí.

 
Nahoru Odpovědět  +1 27. ledna 20:18
Avatar
Taskkill
Redaktor
Avatar
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Taskkill:

takze chces presno to co je na tom odkazovanem webu? okey... proc ne

 
Nahoru Odpovědět 27. ledna 20:27
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Taskkill:

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

Editováno 27. ledna 21:11
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět  +1 27. ledna 21:11
Avatar
Odpovídá na Taskkill
Martin Štěpánek (Enormyk):

No nejdřív to napíšou, označí a pak to zvýrazní :)

Nahoru Odpovědět 27. ledna 21:34
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Odpovídá na Taskkill
Martin Štěpánek (Enormyk):

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 :)

Nahoru Odpovědět 27. ledna 21:41
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Taskkill:

hele premyslel jsem nad tim co jsem napsal ted posledne a je to nesmysl, prave by tam totiz neslo nic oznacovat a zkratky jako ctrl + a nic neudelaj vizualne... takze jsem pokracoval dal v tom contentEditable divu a dostal jsem se do zvlastni faze kdy to v podstate dela co ma ALE proglizec mi to nejakym zahadnym spusobem krute kazi - napisu postupne rukou ahoj jak se mas ale on mi nedovoli napsat a vlozit do html ten tag..proste ho sezere a smaze..tady vidis rozpracovanej stav https://jsfiddle.net/…/uc2nqesh/8/ a tahle verze tezce ignoruje mezery ..coz je proste nejvetsi problem, nevim proc to dela - neni ani tak tezky osetrit ctrl zkratky a tak ..ale ty mezery nechapu budu pokracovat...ty se na to koukni a rekni mi jestli se ubiram spravnym smerem a nebo jestli se ti to uz nelibi to co delam dobre? at to pro tebe ma jeste nejaky vyznam

 
Nahoru Odpovědět 27. ledna 21:52
Avatar
Odpovídá na Taskkill
Martin Štěpánek (Enormyk):

Aha jo vidíš toho jsem si nevšiml, protože jsem na tabletu no - pokusím se :-)

Nahoru Odpovědět 27. ledna 21:59
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Odpovídá na Taskkill
Martin Štěpánek (Enormyk):

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...

Nahoru Odpovědět 27. ledna 22:04
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Taskkill
Redaktor
Avatar
Taskkill:

ja si myslim, ze ono na tabletech a mobilech to bude jinak kvuli soft klavesnici... proto to na kompu funguje dost spatne ... mezery jsou kvuli tomu, ze html ti ignoruje vic nez jednu mezeru .. hele myslim, ze si dam pauzu..potrebuju se nad tim zamyslet nejspis jinak ...chce to jinej pristup neze tenhle

 
Nahoru Odpovědět 27. ledna 22:20
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Taskkill:

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 :)

 
Nahoru Odpovědět 28. ledna 0:36
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 18 zpráv z 18.