Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Własny wysiwyg editor o czym trzeba pamiętać?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
d4ng
Witajcie, w ramach skilla chciałbym napisać własny edytor wizualny:

Podstawowe założenia
- edytor działa na textarea
- możliwość podgrubienia, pochylenia itp zaznaczonego tekstu
- zmiana kroju czcionki i jej koloru
- wstawianie obrazków z linków
- wstawianie tabel
- wstawianie linków

Na samym początku pojawia mi się pytanie dlaczego większość edytorów działa na iframe? Czy to dlatego że to co się kodzi w textarea jest podawane wizualnie w formie iframe? bo sam textarea pokazałby nam kod..? czy to jest jedyne i najlepsze rozwiązanie?
trueblue
Zaletą iframe jest nie tylko bieżący podgląd wizualny, ale również możliwość zastosowania odrębnego (niezależnego od strony gdzie jest osadzona) css.
Wizualny podgląd zapewnia również div z atrybutem contenteditable=true: http://html5doctor.com/the-contenteditable-attribute/
d4ng
ok, ale jak textarea będzie miał unikalny Id który resetuje style dla tego elementu to w jego wnętrzu juz nie będzie problemu bo wszystko będzie się opierać o ten unikalny id? contenteditable wydaje mi się świeższym rozwiązaniem ale jak to wygląda z przeglądarkami mobilnymi?
!*!
Przyjemnie http://caniuse.com/#feat=contenteditable
viking
To ja ci podrzucę pomysł ze stworzeniem edytora Textile. W zasadzie jest tylko markitup. Na pewno by się przydał.
d4ng
Cytat(viking @ 12.11.2015, 12:41:40 ) *
To ja ci podrzucę pomysł ze stworzeniem edytora Textile. W zasadzie jest tylko markitup. Na pewno by się przydał.


a co takiego szczególnego ma markitup? i co musiałby mieć Textile?
viking
http://markitup.jaysalvat.com/home/ to wielojęzykowy edytor i nie wysiwyg. Fajnie gdyby powstało coś na kształ https://github.com/sofish/pen ale bez tylu błędów (kiedyś go wstępnie przerobiłem żeby obsługiwał składnię ale w końcu zrezygnowałem).
A Textile to nie edytor tylko język składniowy, coś jak bbcode i markdown. problem taki, że po stronie php markdown nieszczególnie jest bezpieczny więc nie można go dać w czystej postaci użytkownikowi.
Comandeer
Od razu mówię: porzuć ten pomysł dopóki nie oszalałeś biggrin.gif https://medium.com/content-uneditable/conte...ly-261a38555e9c
A jeśli to Cię dalej nie przekonuje, to polecam spojrzeć w kod CKEditora i zastanowić się czemu jest tak bardzo skomplikowany wink.gif
d4ng
Cytat(Comandeer @ 12.11.2015, 14:44:27 ) *
Od razu mówię: porzuć ten pomysł dopóki nie oszalałeś biggrin.gif https://medium.com/content-uneditable/conte...ly-261a38555e9c
A jeśli to Cię dalej nie przekonuje, to polecam spojrzeć w kod CKEditora i zastanowić się czemu jest tak bardzo skomplikowany wink.gif


heheh dzięki ale...

moim celem jest edytor wizualny w którym będę mógł ustawiać marginesy i który będzie miał możliwość dzielenia tekstu na strony w formacie a4, tak żeby edytor oddawał 1:1 to co wyjdzie z drukarki. Walczyłem z TinyMce, ale jest mi ciężko to zaimplementować więc postanowiłem zrobić własny od podstaw - trochę prostszy.
Comandeer
Cytat
tak żeby edytor oddawał 1:1 to co wyjdzie z drukarki

To życzę Ci powodzenia wink.gif
Cytat
który będzie miał możliwość dzielenia tekstu na strony w formacie a4

W CSS myślą nad tym od 10 lat, więc nie jest to takie proste. Prosty case: jak podzielić tabelkę, która jest na dwóch stronach?
vokiel
Cytat(d4ng @ 12.11.2015, 16:10:56 ) *
moim celem jest edytor wizualny w którym będę mógł ustawiać marginesy i który będzie miał możliwość dzielenia tekstu na strony w formacie a4, tak żeby edytor oddawał 1:1 to co wyjdzie z drukarki.


Co do marginesów to raczej nie jest żadnym problemem - kwestia CSS dla wynikowej strony. Jeśli wybierzesz np tryb http://ckeditor.com/demo#inline to możesz od razu korzystać z podglądu wydruku wbudowanego w przeglądarkę.

Dzielenie na strony - może plugin mierzący wysokość treści wystarczy. Jeśli wykryje, że wysokość jest większa niż zadana to doda jakiś page-break, który potem w CSS print rozdzieliłby to na kolejną podstronę. Oczywiście pojawia się przy tym kilka problemów - jak chociażby obliczanie tej wysokości, przeliczanie jednostek, sposób na ten page-break (czy jakiś div z ustaloną wysokością, który odepchnie pozostałą treść dalej, czy coś innego). Do tego bieżąca aktualizacja i przeliczanie wszystkich elementów rozdzielających na stronie. Przykładowo użytkownik ma 10 stron, teraz na trzeciej usuwa kilka paragrafów - część tekstu wraca na trzecią stronę, page-break się przesuwa w inne miejsce, kolejne są przeliczane i może wyjść 9 stron, albo nadal 10, bo gdzieś i tak jest czegoś za dużo. Do tego sposoby dzielenia długich bloków tekstu, tabel (jak wspomniał Comandeer, list (nie)numerowanych itd.
To jest dużo pracy jak na plugin, ale i tak mniej niż napisanie całego edytora od nowa - bo te problemy w nim też będziesz musiał obsłużyć.

1:1 będzie bardzo trudne do uzyskania, tym bardziej biorąc pod uwagę różnice przeglądarek, ustawień wydruku itd. Pewniej byłoby zrobić PDF i go dawać do drukowania - ale zgranie wyglądu z PDF to też sporo pracy.


Tak czy inaczej powodzenia. Jak już będziesz mieć coś do pokazania to nie omieszkaj wrzucić na forum, z chęcią zobaczę co z tego wyjdzie. Trzymam kciuki!
d4ng
Tak jest wiele problemów które pojawią się po drodze ale dzięki temu mam szansę sporo się nauczyć. Vokiel jak najbardziej miałem podobne założenia ale musze pamiętać że to co widzi użytkownik w sensie ilość linijek nie jest adekwatne do ilości linijek kodu, wiec nie moge tego mierzyć po divie.... Wiem ze wysokość strony to jest x i teraz musze jakoś obliczyć ile zostało mi miejsca od ostatniego elementu do końca strony. Przykład, który podał Commander (tabela) jest bardzo dobry i trudny ale puki co będę mierzyć tabele i jeżeli przekroczy dopuszczalny rozmiar dla pozostałego miejsca na stronie to przerzuca ja na nową stronę. To na teraz bo wolę coś stworzyć i rozwijać a niżeli skończyć na założeniach wink.gif Ps. Myślę że niejednokrotnie będę wklejać kod na to forum ;P
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.