NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Soutěž: Machr na PHP - Vlastní WYSIWYM

Soutěž již skončila

Zadání

Jistě jste si všimli že zde máme nový systém na Machry. Rád bych Vás tedy přivítal u "první" soutěže Machr - Machr na PHP. Dotazy ohledně systému bych prosil ke mně do PM :-).

Nyní přejděme k zadání - půjde o script zpracovávající data z Vašeho vlastního WYSIWYM editoru (stačí textarea). Značky a způsob označování textu nechám na Vás. A aby to nebylo tak jednoduché, budu po Vás chtít zpracovat následující značky:

h1, h2, strong, em, p, ul, a href, img src

Představte si takovýto vstup:

Nadpis1
#######

Odstavec
další řádek odstavce se neodřádkuje.

**Tučné** písmo a *kurzíva*

Nadpis 2
========

- položka seznamu1
- položka seznamu2

"http://www.itnetwork.cz":itnetwork

[* obrazek.png .(Obrázek) *]

Ten se přeloží na tento výstup:

<h1>Nadpis1</h1>
<p>Odstavec
další řádek odstavce se neodřádkuje.</p>

<p><strong>Tučné písmo</strong> a <em>kurzíva</em></p>

<h2>Nadpis2</h2>
<ul>
<li>položka seznamu1
<li>položka seznamu2
</ul>

<p><a href="http://www.itnetwork.cz">itnetwork</a></p>

<p><img src="obrazek.png" alt="obrázek"></p>

Za další značky budou bonusové body.
Bonusové body budou i za případný Javascript - nezapomeňte však, že tento Machr je na PHP, takže pokud uděláte JS 100% a PHP 10%, asi vám to moc nepomůže.

Dialogy na zadávání parametrů (např. odkaz, obrázek) můžete dělat pomocí JS, ale stačí i prázdná textarea a vypsat syntaxi značek někam pod.

Machra odevzdejte pomocí formuláře níže, pokud to bude možné, do poznámky vložte odkaz na online verzi.
Můžete se svým výtvorem pochlubit i v komentářích, ovšem POZOR - jako přihlášené řešení beru pouze to, které bude odeslané pomocí formuláře.

Výhra

Vítěz dostane placku Machr a ocenění do portfolia.

Výhra

Výsledky

Jméno bodů Řešení ( Stáhnout vše )
Michal Žůrek - misaz 90 Stáhnout řešení
adas 90 Stáhnout řešení
Jan Lupčík 75 Stáhnout řešení
dirtyjobs 40 Stáhnout řešení
Tukmak 0 Stáhnout řešení

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Neaktivní uživatel:2.6.2015 18:37

V této soutěži si vyzkoušíme naprogramovat vlastní WYSIWYM editor, konkrétně script který bude zpracovávat zadané informace.

Soutěž končí 10.6.2015 19:00:00, tak se nezapomeň zapojit! :-)

Editováno 2.6.2015 19:21
Odpovědět
2.6.2015 18:37
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Uživatel sítě :2.6.2015 18:40

Dá se to přirovnat k tomu, že budu vlastně zpracovávat v "bb" kódy?

Nahoru Odpovědět
2.6.2015 18:40
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Uživatel sítě
Neaktivní uživatel:2.6.2015 18:45

Budeš vytvářet zjednodušenou verzi toho co máme zde na ITnetworku pro psaní článků (případně zde v komentářích).

Nahoru Odpovědět
2.6.2015 18:45
Neaktivní uživatelský účet
Avatar
Odpovídá na Uživatel sítě
Neaktivní uživatel:2.6.2015 18:48

By the way, WYSIWYM rozlišuje typ elementu, takže H1 nejde napsat jako [h1], ale např.
Há jednička


Há dvojka
=========

Atd.

Nahoru Odpovědět
2.6.2015 18:48
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Uživatel sítě :2.6.2015 18:50

Ano, díval jsem se na ten editor, díky.

Btw. nechceš tam přidat nějaký ten den? Ve čtvrtek jedu na dovolenku, tak abych mohl po ní.. :D :D

Nahoru Odpovědět
2.6.2015 18:50
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Uživatel sítě
Neaktivní uživatel:2.6.2015 18:53

Aspoň se nebudeš nudit ;)

Nahoru Odpovědět
2.6.2015 18:53
Neaktivní uživatelský účet
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:2.6.2015 19:23

Soutěž jsme prodloužili a přidali ukázku vstupu a výstupu.

Nahoru Odpovědět
2.6.2015 19:23
New kid back on the block with a R.I.P
Avatar
Michal Žůrek - misaz:2.6.2015 20:12

Hmmm, čas tíká :D

 
Nahoru Odpovědět
2.6.2015 20:12
Avatar
Michal Žůrek - misaz:2.6.2015 20:14

Možná by to chtělo nějak čarou oddělit komentáře od řešitelů. Splývá to.

 
Nahoru Odpovědět
2.6.2015 20:14
Avatar
Jan Lupčík
Tvůrce
Avatar
Jan Lupčík:2.6.2015 20:33

Velmi zajímavý machr. Zapojuji se. PHP je prostě moje láska. (v) :D

Nahoru Odpovědět
2.6.2015 20:33
TruckersMP vývojář
Avatar
Odpovídá na Neaktivní uživatel
Matúš Petrofčík:2.6.2015 22:31

Môžeme si vytvoriť aj vlastné znaky alebo musia zodpovedať ukážke?

Nahoru Odpovědět
2.6.2015 22:31
obsah kocky = r^2 ... a preto vlak drnká
Avatar
qwertyW
Tvůrce
Avatar
Odpovídá na Matúš Petrofčík
qwertyW:2.6.2015 22:37
Značky a způsob označování textu nechám na Vás.
Nahoru Odpovědět
2.6.2015 22:37
Programuji, tedy jsem.
Avatar
Odpovídá na qwertyW
Matúš Petrofčík:2.6.2015 22:45

aw! dneska všetko zle čítam :D dík

Nahoru Odpovědět
2.6.2015 22:45
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matúš Petrofčík
Honza Bittner:2.6.2015 23:06

Zkus si udělat převod z markdownu... :)

Základ syntaxe tu https://help.github.com/…down-basics/
Je to podobné jako Texy (to se používá zde), ale o mnoho lepší. :)

Nahoru Odpovědět
2.6.2015 23:06
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Matúš Petrofčík:2.6.2015 23:14

Niečo podobného práve odkukujem z Bitbucketu :)
https://bitbucket.org/…markdowndemo

Nahoru Odpovědět
2.6.2015 23:14
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Tomáš123
Člen
Avatar
Tomáš123:3.6.2015 14:20

Čo je WYSIWYM? Nie náhodou WYSIWYG?

Nahoru Odpovědět
3.6.2015 14:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Tomáš123
Ondřej Štorc:3.6.2015 14:33

Ne je to správně, WYSIWYM znamená "what you see is what you mean". http://en.wikipedia.org/wiki/WYSIWYM

Nahoru Odpovědět
3.6.2015 14:33
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovídá na Tomáš123
Zdeněk Pavlátka:3.6.2015 18:01

Já jen dodám, že WYSIWYG je "what you see is what you get" - tzn. že v editoru se ti všechno zobrazuje tak, jak to bude finálně vypadat.

Nahoru Odpovědět
3.6.2015 18:01
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Neaktivní uživatel:3.6.2015 18:20

Pokud nepoužíváš na webu jiný styly :` :-)

Nahoru Odpovědět
3.6.2015 18:20
Neaktivní uživatelský účet
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Zdeněk Pavlátka
Tomáš123:3.6.2015 19:57

Práve preto, že poznám význam iniciálovej skratky WYSIWYG som sa domnieval, že je to tu uvedené nesprávne (nemyslel som, že umelé formátovanie (pomocou hocičoho) nie je vo WYSIWYG editore zvyklé). Odkaz od Ondreja ma naviedol späť. :)

Nahoru Odpovědět
3.6.2015 19:57
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Michal Žůrek - misaz:3.6.2015 22:46

Moje řešení si můžete vyzkoušet.

online: http://misaz.url.ph/wysiwym/
downlaod: http://misaz.moxo.cz/…-wysiwym.zip

 
Nahoru Odpovědět
3.6.2015 22:46
Avatar
Odpovídá na Michal Žůrek - misaz
Matúš Petrofčík:3.6.2015 22:55

Veď ti nefunguju nadpisy a enter v odstavci.

Nahoru Odpovědět
3.6.2015 22:55
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Matúš Petrofčík
Michal Žůrek - misaz:3.6.2015 22:57

aha, nadpisy fungují jen v lokální verzi. O víkendu to opravím.

//Na tom serveru je nějaké pravěké PHP

Editováno 3.6.2015 22:57
 
Nahoru Odpovědět
3.6.2015 22:57
Avatar
Jurajs
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Jurajs:4.6.2015 16:21

Sory, že se ptám, ale co to má mít za funkci? Trochu jsem asi nepochopil zadání? :D :D

 
Nahoru Odpovědět
4.6.2015 16:21
Avatar
Odpovídá na Jurajs
Neaktivní uživatel:4.6.2015 16:22

Přečti si tu diskuzi tady ...

Nahoru Odpovědět
4.6.2015 16:22
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Šmahel:4.6.2015 17:54

Jak má vypadat výstup?? Musí to být zase v <textarea>??

Nahoru Odpovědět
4.6.2015 17:54
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Neaktivní uživatel:4.6.2015 22:03

Výstup si dej kam chceš, důležitý je aby to správně převedlo tvoje značky na HTML ...

Nahoru Odpovědět
4.6.2015 22:03
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz:5.6.2015 19:33

takže opraveno. Verze 1.1.0.

Online: http://misaz.url.ph/
Download: http://misaz.moxo.cz/…ym-1-1-0.zip
Bug byl u konstanty PHP_EOL, která tedy moc není univerzální. Zakončení řádku je na linuxu jiné než na Windowsu a tak vznikl problém.

Řešení: vyhodit z vstupu znak \r a konstantu PHP_EOL nahradit za \n.

 
Nahoru Odpovědět
5.6.2015 19:33
Avatar
Odpovídá na Michal Žůrek - misaz
Matúš Petrofčík:5.6.2015 19:56
Odstavec
další řádek odstavce se neodřádkuje.

ešte toto :)

Nahoru Odpovědět
5.6.2015 19:56
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Matúš Petrofčík
Michal Žůrek - misaz:5.6.2015 20:36

na to už kašlu. :D Ani jsem moc nepochopil k čemu je to dobrý.

 
Nahoru Odpovědět
5.6.2015 20:36
Avatar
Odpovídá na Michal Žůrek - misaz
Uživatel sítě :7.6.2015 21:00
Řešení: vyhodit z vstupu znak \r a konstantu PHP_EOL nahradit za \n.

Zajímavé, ostatní radí vyhodit \r nebo \n.. :D
Díky ti. :)

Nahoru Odpovědět
7.6.2015 21:00
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Uživatel sítě
Matúš Petrofčík:7.6.2015 21:02
private function standardizeLineBreaks($text){
        return str_replace(array("\r\n", "\r"), "\n", $text);
    }

takto som to urobil ja

btw neviem či to dokončím, moc sa mi ani nechce :D zatiaľ ale úspešne odolávam nahliadnutiu do michalovho riešenia, takže ešte mám šancu :D

Editováno 7.6.2015 21:03
Nahoru Odpovědět
7.6.2015 21:02
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Uživatel sítě
Michal Žůrek - misaz:7.6.2015 21:05

ono mě teď možná napadá, že to asi nemusí fungovat na macu, kde se k odřádkování používá ten znak, který se vyhodí.... Pokud by to někdo řešil, tak nahradíte \r za \n, čimž vám buď vznikne

Linux: \r => \n
Windows \r\n => \n\n
Mac \n = \n

a jednoduše pak replacnete 2 \n za jedno (případ Windows). Pak by to mělo být (snad) dokonalé. Ale nezkoušel jsem, to možná to nebude v reálu tak růžové. :D

 
Nahoru Odpovědět
7.6.2015 21:05
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:7.6.2015 21:10

A nešlo by to prostě pomocí regexpu

(\r)?\n

?
EDIT: Nebo prostě \r\n

Editováno 7.6.2015 21:12
Nahoru Odpovědět
7.6.2015 21:10
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:7.6.2015 21:12

šlo. Dovedl jsi to k dokonalost. :)

Editováno 7.6.2015 21:12
 
Nahoru Odpovědět
7.6.2015 21:12
Avatar
David Hynek
Tvůrce
Avatar
David Hynek:7.6.2015 21:38

A o TEXY jste slyšeli? http://texy.info/cs/try

Nahoru Odpovědět
7.6.2015 21:38
Čím víc vím, tím víc věcí nevím.
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na David Hynek
Adam Ježek:8.6.2015 7:25

Vzhledem k tomu, že na něm běží editory tady na síti, tak určitě slyšeli. Ale podstatou soutěže neni okopírovat fungující řešení, ale napsat vlastní, které je lepší než co mají ostatní :)

Nahoru Odpovědět
8.6.2015 7:25
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
David Hynek
Tvůrce
Avatar
Odpovídá na Adam Ježek
David Hynek:8.6.2015 8:45

:) já už se lekl :) co mě na TEXY a podobným vadí, že na jednoduché stylování, je celkem dobře použitelný, ale jak přijde na tabulky, odsazení a pod tak už se v tom člověk snadno zamotá.

Nahoru Odpovědět
8.6.2015 8:45
Čím víc vím, tím víc věcí nevím.
Avatar
dirtyjobs
Člen
Avatar
dirtyjobs:9.6.2015 6:58

Tady je moje řešení:
http://dirtyjobss.sweb.cz/

 
Nahoru Odpovědět
9.6.2015 6:58
Avatar
Odpovídá na dirtyjobs
Matúš Petrofčík:9.6.2015 8:41

nefunguje ti link

Nahoru Odpovědět
9.6.2015 8:41
obsah kocky = r^2 ... a preto vlak drnká
Avatar
dirtyjobs
Člen
Avatar
dirtyjobs:9.6.2015 9:04

Jsem tam zkoušel ještě něco změnit. A omlouvám se za ten kód, je to psané v notepadu.

 
Nahoru Odpovědět
9.6.2015 9:04
Avatar
Odpovídá na Tomáš Maňhal
Matúš Petrofčík:9.6.2015 10:43

mne nie :D windows 7 firefox developer edition 40

Nahoru Odpovědět
9.6.2015 10:43
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Matúš Petrofčík
Ondřej Štorc:9.6.2015 10:56

Mě taky ne, ale nejsem si jistej jestli pochopili co tím myslíš...
dirtyjobs jde o změnu tohohle

"http://www.itnetwork.cz":itnetwork

na odkaz

Editováno 9.6.2015 10:56
Nahoru Odpovědět
9.6.2015 10:56
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
dirtyjobs
Člen
Avatar
Odpovídá na Ondřej Štorc
dirtyjobs:9.6.2015 11:11

Ano, já ty uvozovky vynechávám(aspoň myslím), ale IE, MF i GCh mi vše zobrazuje jak má. Vážně newím co je to "firefox developer edition 40".:(

 
Nahoru Odpovědět
9.6.2015 11:11
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na dirtyjobs
Ondřej Štorc:9.6.2015 11:12

Já mám teda chrome a ten odkaz nefunguje tak jak má...

Nahoru Odpovědět
9.6.2015 11:12
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
dirtyjobs
Člen
Avatar
Odpovídá na Ondřej Štorc
dirtyjobs:9.6.2015 11:23

S HTML jsem začal v pátek, takže se v tom ještě tak nevyznám, asi to bude těma uvozovkama.:)

 
Nahoru Odpovědět
9.6.2015 11:23
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na dirtyjobs
Ondřej Štorc:9.6.2015 11:26

Nevím jak to parsuješ, ale ten text itnetwork musí být mezi tagy <a></a>, Ty tam máš místo toho adresu toho odkazu...

Nahoru Odpovědět
9.6.2015 11:26
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovídá na dirtyjobs
Neaktivní uživatel:9.6.2015 11:27

Chybí ti tam strong, em, ul

Nahoru Odpovědět
9.6.2015 11:27
Neaktivní uživatelský účet
Avatar
dirtyjobs
Člen
Avatar
Odpovídá na Neaktivní uživatel
dirtyjobs:9.6.2015 11:43

Nikdo není dokonalý :)

 
Nahoru Odpovědět
9.6.2015 11:43
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 50 zpráv z 67.