Implementace vlastního WYSIWYG editoru

hknmtt

  • ****
  • 307
    • Zobrazit profil
    • E-mail
Implementace vlastního WYSIWYG editoru
« kdy: 08. 07. 2025, 14:33:43 »
Mam na webstranke editor ktory parsuje markdown(vratane vlastnych elementov) cez lexer a doda mi tokeny, ktore ja nasledne renderujem vo Vue. Aktualne mam dva mody: github styl, kedy sa pouzivatel manualne prepina medzi editovanim a renderom, a celostrankovy mod, kde su dva stlpce - vstup na jednej strane a vedla je vyrenderovany vysledok.

Chcel by som pridat treti mod - WYSIWG, cez contenteditable. Teoreticky viem ako na to a ako to implementovat, avsak zaujimali by ma take veci, ako napriklad zistenie ak ma pouzivatel vyselektovany nejaky text, ako to spravne zachytit aby som potom vedel spravne rozdelit text, ako pracovat s poziciou kurzora a td.

Skratka ma zaujimaju take genericke rady, tipy a triky od niekoho, kto uz vlastny WYSIWYG implementoval.


RDa

  • *****
  • 3 057
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #1 kdy: 08. 07. 2025, 16:07:17 »
Tak to jsem zvedav, zda dokazes ukocirovat treba situaci, kdy uzivatel vybere pulku nadpisu a pulku odstavce (uprostred slov, ne vedle mezery), a klikne na bold. Takova vec se v MD mozna ani neda reprezentovat..

Re:Implementace vlastního WYSIWYG editoru
« Odpověď #2 kdy: 08. 07. 2025, 18:06:40 »
Tak to jsem zvedav, zda dokazes ukocirovat treba situaci, kdy uzivatel vybere pulku nadpisu a pulku odstavce (uprostred slov, ne vedle mezery), a klikne na bold. Takova vec se v MD mozna ani neda reprezentovat..

A čo toto?

Kód: [Vybrat]
## nad**pis**
**te**xt

Re:Implementace vlastního WYSIWYG editoru
« Odpověď #3 kdy: 12. 07. 2025, 01:22:16 »
Tak to jsem zvedav, zda dokazes ukocirovat treba situaci, kdy uzivatel vybere pulku nadpisu a pulku odstavce (uprostred slov, ne vedle mezery), a klikne na bold. Takova vec se v MD mozna ani neda reprezentovat..

Povolené budou jen stavy, které dávají smysl. Dávno takový typ editorů schází, bohužel to asi průměrný uživatel neocení a proto vládnou nedodělky a průměrnost...

Re:Implementace vlastního WYSIWYG editoru
« Odpověď #4 kdy: 16. 07. 2025, 17:01:00 »
Implementoval jsem v praci vlastni WYSIWYG editor, potom co jsme jich nekolik zkusili pouzit. Ze zacatku to vypada jako relativne snadno ale pak to zabralo nekolik clovekomesicu. A tahle manipulace s oznacenym fragmentem a jeho konverze do bold, coz znamena rozsekani puvodniho stromu dala hodne zabrat.

Rucne se musi osetrit i takove veci jako zmacknuti Enteru.

Zkusil bych se podivat po existujicim editoru a jeho prizpusobeni.


Re:Implementace vlastního WYSIWYG editoru
« Odpověď #5 kdy: 16. 07. 2025, 22:33:41 »
Možná by šlo použít nějaký editor přes WebAssembly.

Třeba Rust má dobrou podporu WebAssembly a možná by šlo použít něco jako EasyMark editor v egui a přidat do toho WYSIWYG nebo najít existující WYSIWYG v Rustu.
« Poslední změna: 16. 07. 2025, 22:36:32 od Radek Miček »

CPU

  • *****
  • 1 146
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #6 kdy: 16. 07. 2025, 23:06:19 »
Nejeden programátor si na WYSIWYG editoru vylámal zuby.
Já chtěl jen takovou blbost, jako udělat okolo proměnné obdélníček se spojnicí na boxík a pár dalších blbinek a najednou mi z toho bylo zle...

peete

Re:Implementace vlastního WYSIWYG editoru
« Odpověď #7 kdy: 17. 07. 2025, 11:12:03 »
WYSIWYG nefunguje 100% správně ani ve Wordu nebo LibreOffice. Kromě problémů už vyjmenovaných jsou tam další nechutnosti jako např. pokračování ve psaní (Má to vzít nějaký formát z předchozího/okolního textu - automatizace? Nebo začít bez formátu - ruční práce? - to první bude fungovat jen z části, to druhé naštve uživatele že jim to nepomůže), nebo mazání v různých částech textu (který formát vymazat, který převzít z okolního textu a pod.). Takže určitě hodně štěstí.

Re:Implementace vlastního WYSIWYG editoru
« Odpověď #8 kdy: 17. 07. 2025, 14:06:47 »
Pridávam sa k tým, čo si na vlastnom wysiwyg vylámali zuby. Nebol a nie je to dobrý nápad. Je to nekonečne hlboká králičia nora. Začneš riešiť jednu vec, počas toho zistíš, že musíš riešiť ďalších 10 problémov, a každý z tých 10 problémov bude vyžadovať riešenie ďalších 10 problémov. Čistá psychiatria. Navyše, ľahko sa dostaneš do stavu, že budeš musieť používateľom diktovať, na akom zariadení a prehliadači ten editor majú používaťa a na akom nie.

hknmtt

  • ****
  • 307
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #9 kdy: 17. 07. 2025, 15:04:39 »
Vdaka za informacie a skusenosti. V principe ten WYSIWYG az tak moc nepotrebujem, skor je to o tom ze niektori ludia markdown moc nemusia/nepoznaju, ale zase ovladaju HTML, ktore zase ja nepodporujem. Tak mi prislo, ze WYSIWYG je taka dobra stredna cesta. Ale zrejme nie teda.

Kit

  • *****
  • 836
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #10 kdy: 17. 07. 2025, 17:50:32 »
Vdaka za informacie a skusenosti. V principe ten WYSIWYG az tak moc nepotrebujem, skor je to o tom ze niektori ludia markdown moc nemusia/nepoznaju, ale zase ovladaju HTML, ktore zase ja nepodporujem. Tak mi prislo, ze WYSIWYG je taka dobra stredna cesta. Ale zrejme nie teda.

Markdown je určen hlavně pro lidi, kteří se při psaní dokumentace chtějí soustředit na obsah a stylování přenechat stroji. Psaní HTML značek by je zbytečně rozptylovalo. Existují WYSIWYG editory, které to sice umí, ale zato jejich výstupní kód bývá příšerný. Právě Markdown měl být tou střední cestou s minimem potřebných značek.

Co třeba editor, který se používá zde na fóru? Ten je podle mne docela povedený.

hknmtt

  • ****
  • 307
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #11 kdy: 17. 07. 2025, 19:20:43 »
Co třeba editor, který se používá zde na fóru? Ten je podle mne docela povedený.

To je bbcode. Je fajn, ale nekompatibilny s MD.

Kit

  • *****
  • 836
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #12 kdy: 17. 07. 2025, 19:26:17 »
Co třeba editor, který se používá zde na fóru? Ten je podle mne docela povedený.

To je bbcode. Je fajn, ale nekompatibilny s MD.

To je takový problém ho modifikovat?

CPU

  • *****
  • 1 146
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #13 kdy: 17. 07. 2025, 21:36:45 »
Co třeba editor, který se používá zde na fóru? Ten je podle mne docela povedený.

Ten editor tady je všechno, jen ne BFU friendly...

Kit

  • *****
  • 836
    • Zobrazit profil
    • E-mail
Re:Implementace vlastního WYSIWYG editoru
« Odpověď #14 kdy: 17. 07. 2025, 22:06:28 »
Co třeba editor, který se používá zde na fóru? Ten je podle mne docela povedený.
Ten editor tady je všechno, jen ne BFU friendly...

Však tady žádné BFU nemáme.