Wysiwyg, zvýrazňování syntaxe ..

10.10.2009 12:45 | Přečteno: 1333× | Abíčko | poslední úprava: 10.10.2009 12:55

Máme pro vás pár dalších vylepšení Abíčka: nový Wysiwyg editor nasazený všude s příjemným ovládáním, možnost jednoduše zvýrazňovat syntaxi nebo zobrazovat smajlíky u zápisků v blogu.

Loni jsem nasadil wysiwyg editor FCK, ale nebyli jsme s ním spokojeni. Byl pomalý a měl chyby, spousta uživatelů si jej úplně vypnula. Nový editor je založen na TinyMCE a určitě bude mít taky spoustu chyb a najdou se lidi, kteří budou nadávat, jak je pomalý. Nicméně ovládaní je teď mnohem lepší, defaultní stav jej totiž zobrazit textové pole s formátovacími tlačítky a první z nich je Editor, kterým se přepnete do WYSYIWYG modu nebo se vrátíte zpět. V nastavení svého účtu si můžete vybrat, zda se má editor nahrávat automaticky ve WYSIWYG režimu, ponechat default nebo jeho nabídku úplně odstranit. Systém si pamatuje aktuální vaši volbu při náhledu a zachová ji na další stránce. Popisovat další funkce nemá smysl, koho to zajímá, určitě se s nimi seznámí. Zmínil bych jen podporu break u blog zápisků, která je dost pohodlná. Nově se pro dělení zápisků používá konstrukce, starý HTML způsob je stále podporován. A ještě jednu vlastnost zmíním: pokud při editaci kliknete na nějaký odkaz a pak se vrátíte zpět, nepřijdete o své změny.

Další novinky jsou prací Jirky Keresteše, který je u nás na středoškolské brigádě. První věcí byla podpora pro smajlíky v textu blogových zápisků . Dále přidal podporu pro zvýrazňování syntaxe, takže když použijete u značky PRE atribut class, můžete určit, v jakém jazyce je a systém jej přehledně vyrenderuje. Nejlépe to demonstrovat na ukázce použití.

System.out.println("Kuku");

Nevýhodou použité knihovny je množství javascriptových souborů. To už je neúnosné, takže budu muset nasadit kompresi javascriptů. Dneska to ale nestihnu.

       

Komentáře

[mess]

No, mi firebug píše 404 při pokusu načíst ty javascriptové soubory. Takže tipuju, že je někdo zapomněl nahrát na server.

[Leoš Literák]

Jojo, uz jsem si tez vsimnul

[hikikomori82]

Neviem kde urobili sudruzi z NDR chybu ale:

- ikony su zmensene a rozmazane jak po desiatom pive, pritom ale original je v pohode.

- je nemozne editorom cokolvek poslat: CSS vlastnost OVERFLOW není povolena u značky DIV

[Andrej Herceg]

Příloha:

• plocha79.png (0 bytů)

Problém je pravdepodobne v tvojom nastavení prehliadača (mne sa tie tlačidlá zobrazujú nerozmazane).

[Luk]

Příloha:

• chyba-tinymce.png (0 bytů)

Díky za změnu, ale editor mi jde "za roh" - viz obrázek

[Senior Database Programmer]

Kúp si monitor s väčším rozlíšením, nie sme v roku 1998!

[Luk]

Na tento vynikající CRT monitor nedám dopustit - zatím jsem neviděl LCD monitor, který by s ním byl srovnatelný. Nevyměním ho, dokud bude naživu (používám i jiné monitory, s větším rozlišením, ale tohoto se nehodlám zbavit).

[Josef Kufner]

Hmm... to bys měl říkat spíš výrobcům notebooků... jinak u mě jde za roh taky, asi o 50px.

[Luk]

A to jsem to nezkoušel prohlížet na PDA! I když tam používám Operu Mini, takže je možné, že by to tam tento problém nebyl.

[Vin]

Zkus ho zmenšit tak, že ho chytneš za pravý dolní roh (jako aplikaci). Pak jde zmenšit (sice ne úplně, ale trochu jo).

[Grunt]

Příloha:

• Bug.png (0 bytů)

Dále přidal podporu pro zvýrazňování syntaxe

Tak to je ale paráda. Ale přece jen jsem našel jednu malou mršku.

[lmanik]

jj mam stejny problem (defaultni vzhled)

[06078]

Příloha:

• abicko.PNG (0 bytů)

Jop, já taky. Zvýrazňování super, ale dost přesahuje. U wysiwyg editoru to samé, ale tam to i chápu.

[Leoš Literák]

Vsiml jsem si. Najde se nekdo, kdo to opravi?

[Filip Jirsák]

To bude asi problém. Aby fungovalo to zobrazování nabídky vpravo*), má celý box nastavenu vlastnost position:relative. A CSS nijak neřeší, jak spolu mají interagovat absolutní či relativní pozicování a obtékání – takže nejen, že se ve Firefoxu ten box vykreslí přes pravý sloupec, ale ono se to může v každém prohlížeči chovat jinak.

*) To pozicování neřeší, aby se nabídka zobrazovala vpravo, ale aby se zobrazovala na horním okraji zdrojáku. I kdyby se přesunula doleva, problém by se nevyřešil.

[Grunt]

Heh, a komu vůbec nahlásit bug?

[Filip Jirsák]

W3C Jinak konkrétně v tomto případě je chyba na Abíčku, protože se použili věci, které dohromady moc použít nejdou. Autor toho zvýrazňovače jej těžko může udělat tak, aby fungoval za všech okolností ať se vloží kamkoli.

Jediné řešení, které mne napadá, je vypnout u toho zvýrazňovače position:relative a to meníčko dostrkat na správné místo JavaScriptem – bez něj to stejně nedělá nic, takže to nevadí.

[mess]

No, já jsem taky přemýšlel a zkoušel a po cca tři čtvrtě hodině mám toto:

.syntaxhighlighter {
  z-index: 0;
}
.syntaxhighlighter .toolbar {
  right: auto !important;
  top: -32px !important;
  left: -10px !important;
  opacity: 0.7;
}
.syntaxhighlighter .toolbar:hover {
  opacity: 1;
}
.obal_ps {
  z-index: 1;
  position: relative;
}

Pravý sloupec jsem dal nad syntaxhighlighter a ten vyskakovací toolbar jsem dal doleva, aby nebyl překryt oním zmiňovaným sloupcem. Taky se ten toolbar objeví poloprůhlený, aby moc nepřekážel. Enjoy.
Btw. trochu se to bije s tlačítkem "Rozbalit", pokud je ten text v <pre> delší; chtělo by to trochu poladit.

[Filip Jirsák]

A bude to všude (na dalších šablonách stránky) fungovat, když se dá pravému sloupci position:relative? V každém prohlížeči se to může chovat jinak… Jinak je to asi dobrá cesta – když se pere pozicování u kódu a obtékání u sloupce, tak pozicovat i sloupec.

[mess]

Pokud se dá position: relative, tak by se nemělo stát vůbec nic, pokud se nenastaví top, left, right nebo bottom. Jen se z toho elementu stane tzv. bounding box - od jeho okrajů se budou odpočítávat souřadnice jeho relativně nebo absolutně pozicovaných dětiček - a taky to způsobí to, že budou možné takové ty hrátky se z-indexem. Jinak ve FF ani v Aroře(webkit) jsem zatím na žádný problém nenarazil. V Opeře ti to nepovím, protože se mi rozbila a nemám náladu ji opravovat a na IE namám licenci.

[Josef Kufner]

float: right;
margin-bottom: 100%;

By mělo stačit, pokud to menu je na vhodném místě v HTML.

[vlastikroot]

Jak se pouziva to zvyraznovani? Kdyz dam u PRE class brush:java nebo java, tak mi to napise ze hodnota neni povolena.

[mess]

Asi to musí být brush: java a ne brush:java - všimni si té mezery za brush:. Tady je důkaz v ruby, že to funguje .

puts "Hello, world!"

[vlastikroot]

$promena = 5;
foreach($pole as $klic => $hodnota)
{
    $hodnota->funkce();
}
echo("Hello, World!");

Diky! Funguje to Nenapadlo by me, ze by mezera mohla mit vliv.

[Michal Čihař]

No vypadá to sice pěkně, ale dřív se kód dal zkopírovat bez problémů, teď tam jaksi přebývají čísla řádků.

[mektige]

Souhlas, ty čísla jsou opravdu průser...

[06078]

Šlo by je vyměnit za obrázek. Prostě dlouhý obrázek s čísly, a zobrazily by se pouze ty, které by byly potřeba. Bohužel by se načítal obrázek celý. Něco jako na programujte.com.

[Grunt]

Šlo by je vyměnit za obrázek. Prostě dlouhý obrázek s čísly

Ježiš, smrt. To ať nikoho ani nenapadá.

[06078]

Lepší než zkopírovat zdroják a mazat čísla řádků.

[Grunt]

No dobře, ale hned se nemusí vymýšlet cipoviny. Buď by stačil číslovaný seznam u kterého to označení přímo vyřadí prohlížeč a nebo věřím v to, že existuje nějaký atribut pro neoznačitelný text. Obrázek sice řešení je také, ale asi jako od Microsoftu.

[loketnik]

+1

[Grunt]

Dá se to přepnout čistě do plain-textu tím tlačítkem vpravo nahoře v tom rámu. Je to moc pěkné, jen by bylo pěknější, kdyby se to přeplo přímo v tom rámu. A ještě by mohly být trošičku menší ty čísla řádku.

[Martin Stiborský]

Je tam ikonka která ti v novém okně otevře čistý zdroj.

[Grunt]

Jinak nevím proč, ale na stránkách toho projektu v ukázkách je přímo Copy to clipboard. Není tady nějaká stará nebo ořezaná verze toho zvýrazňovače?

[Leoš Literák]

Najed mysi na ten zformatovany text a koukni vpravo nahoru.

[Grunt]

Příloha:

• snimek.png (0 bytů)

Vždyť říkám, že já tam nic takového nemám. A nebo že by byla chyba přímo u mě?

[Grunt]

A jo, on je to flash. Tak to tam radši ani nechci.

[mess]

Spíš si myslím, že tady nechtěli tahat další flash.

[Martin Stiborský]

V Chromium 4.0.222.0 (28233) se mi editor nechce otevřít, po kliknutí na "Editor" se nic nestane.

Originální TinyMCE na jejich domovské stránce mi funguje.

[Grunt]

Jinak nic proti JS(v tomto konkrétním případě má dokonce i nějaké klady), ale nebylo by přece jen lepší hledat nějaké řešení, které už zvýrazňovanou verzi pošle klientovi přímo v HTML? Problém je totiž v tom, že to links nezpracuje a to je docela škoda, ne? Barvičky v terminálu už nějakou dobu jsou.

[hikikomori82]

js zvyraznovanie ma tu vyhodu ze to nezatazuje server

[Grunt]

Aha. To mě nenapadlo. No na druhou stranu nikdo neříká, že se to v nějaké keši nemůže udržovat už předrenderované.

[Jiří J.]

Výtečně! Hurá! Sláva! Konečně můžu mít HTML editor "by default" a stránka mi při náhledu necpe zpět WYSIWYG! Ne že bych byl jeden z odpůrců těchto editorů, ale:

• Svítí bíle v mém tmavém vzhledu, což v noci moc příjemné není. Asi by to šlo opravit, ale to kvůli bodu 2 nechám na někom jiném.
• Je pomalý Rychlejší, než ten původní - snad, ale i tak je pomalý. Tedy alespoň na celeronu 2.6GHz (~2003?), 1G RAM a nejnovějším firefoxu pod fluxboxem a oficiálními nvidia drivery. On to není problém jen tady, javascript mi jde poměrně žalostně (zvlášť v dnešní módě stavět vše na javascriptu - původní verze Githubu se mi ani nenačetla), nicméně pořád ten HTML-based editor je daleko rychlejší.
• Nejsem odpůrce WYSIWYG, jen je nemám rád .. tak nějak nedám dopustit na formátování textu bez použití myši v jakémkoli editoru (prostým napsáním toho HTMl tagu) a navíc většina z nich má .. já tomu říkám "frontpage syndrom". Nevím, jak nový WYSIWYG, ale ten starý měl ve zvyku dávat <p>&nbsp;<p> místo <br> kupříkladu. Když píši někomu dopis, taky nezadám počítači text, aby mi ho nějak naformátoval, ale pohraji si s odstavci, odsazením, přidám pěkný obrázek, ..., stejně tak si hledím HTML vzhledu příspěvku, který odesílám - teď jsem musel kupříkladu pěkně nařádkovat ul seznam, protože "to tlačítko" asi nezná pojem newline .