Darmowy edytor WYSIWYG generujący poprawny kod

Darmowy edytor WYSIWYG generujący poprawny kod
GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

Szukam darmowego edytora WYSIWYG, generującego poprawny kod dla XHTML 1.0 Transitional. Chcę go wykorzystać na stronie, która będzie się utrzymywać z reklam. Tak więc wydaje mi się, że musi to być coś, co umożliwia darmowe wykorzystanie w projektach komercyjnych.

Dużo tych edytorów w necie. Dobry jest chyba CKEditor, ale zauważyłem, że ma płatne licencje... TinyMCE kiedyś podobno robił niezły syf w kodzie - nadal tak jest? Jak u niego z licencją?

PS. Nie musi to być coś rozbudowanego. Ważne, żeby było intuicyjne i umożliwiało pogrubianie, kolorowanie tekstu, listy

  • i
    1. itp. Mile widziana obsługa tabel.</p>
edytowany 1x, ostatnio: madmike
BS
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 12 lat
0

Ostatnio jak sprawdzałem TinyMCE, to generował wystarczającą ilość syfu, by dokumenty nie były poprawnymi dokumentami HTML5. Zagnieżdżenia elementów były OK, ale śmiecił jakimiś starymi atrybutami. Niestety nie pamiętam jak to się ma do XHTML-a 1.0 Transitional, bo -- szczerze mówiąc -- chyba nigdy podczas mojej x-nasto letniej krucjaty webdeveloperskiej tego doctype'u nie użyłem (?).

Pogoogluj i sprawdź sobie jeszcze CLEditor oraz YUI Editor. One chyba generują w miarę przyzwoity kod, ale ten pierwszy z tego co pamiętam jest komercyjny...

edytowany 2x, ostatnio: bswierczynski
GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

XHTML-a 1.0 Strict też nigdy nie użyłeś?

BS
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 12 lat
0

Stricta używałem :)

GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

W zasadzie te standardy nie różnią się w jakiś olbrzymi sposób. Testowałeś Stricta w TinyMCE?

BS
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 12 lat
0

Testowałem, tylko -- kurczę -- to było wszystko dość dawno temu. Od kilku lat (nie wiem, czy 2 czy więcej) lecę na HTML-u 5, a od strony backendu to albo jakiś komercyjny edytor, albo własnej roboty, albo cholera wie co, ale ja praktycznie za wybór edytora nie odpowiadam.

XHTML-a Strict użyłem na pewno na stronie, gdzie w CMS-ie był TinyMCE. Jakoś na pewno to działało, tzn. błędów nie było, ale nie dam sobie głowy uciąć jak to osiągnięto. Tzn. może jakoś ręcznie filtrowano ten kod z Tiny. Projekt, który kojarzę, był witryną agencji interaktywnej i równie dobrze ludzie mogli wstawiać w edytor kod XHTML zamiast używania funkcji WYSIWYG.

No i jedno jest pewne: jeśli Strict działał, to i Transitional też. Z drugiej strony, jeśli Strict nie działał, to Transitional i tak mógł działać ;).

Zobacz sobie np. to live demo TinyMCE:
http://tinymce.moxiecode.com/tryit/full.php

Po zapostowaniu kodu i wklejeniu na http://validator.w3.org, "prawie" się waliduje jako XHTML Strict. Są dwa głupie błędy, ale nie w kodzie zwróconym przez edytor. Więc wygląda na to, że obecna wersja TinyMCE generuje poprawny kod dla XHTML-a Strict, a więc i jako XHTML Transitional powinno działać.

GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

Dzięki za odpowiedzi. Jutro jak znajdę czas to potestuję TinyMCE. Tylko czy będę mógł go legalnie używać na stronie, która zarabia na reklamach? Będzie dostępny nie tylko dla administracji, ale również dla użytkowników.

BS
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 12 lat
0

Przeczytaj licencję ;). Jestem przekonany, że tak, ale moja opinia oczywiście nie ustanawia legalności takiego przedsięwzięcia.

Demonical Monk
  • Rejestracja:około 17 lat
  • Ostatnio:10 miesięcy
0

Trochę mnie to bawi że niektórzy developerzy wolą masturbować się validatorem W3 zamiast po prostu zadbać żeby wszystko zadziałało w praktyce... Co przeglądarka to inne zachowanie w różnych sytuacjach, zgodność miejscami kuleje.


Women were the reason I became a monk - and, ah, the reason I switched back...
BS
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 12 lat
0

Ano kuleje. Ale mi to jakoś nie przeszkadza w uzyskiwaniu kodu, który działa ORAZ jest zgodny ze standardami, a także waliduje się w walidatorze W3C (który, nawiasem mówiąc, wcale taki dobry nie jest).

W przypadku Tiny problemem są te śmiecie, które to ustrojstwo zawsze potrafiło wygenerować. Jak ostatni raz sprawdzałem, generowało toto sporo niepotrzebnych, prezentacyjnych atrybutów -- wycofanych z nowych wersji HTML-a. Te atrybuty nie są mi do niczego potrzebne. Edytor także wcale nie musi ich dodawać -- bo nie wszystkie edytory generują aż taki crap. Więc to po prostu mankament Tiny'ego (przynajmniej starszych wersji) i tyle. Jeśli można, to lepiej używać softu, który tego mankamentu nie ma.

GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

Podoba mi się Twoje podejście bswierczynski, bo mam dokładnie takie samo.

Jest jeszcze inna kwestia - warto dbać by kod był optymalny, "czysty" i zgodny ze standardami, bo wyszukiwarki internetowe mogą na to zwracać uwagę. Dlatego jeśli edytor nie robi błędów i w dodatku potrafi tworzyć semantyczny (i na takowy poprawiać obecny) kod to już w ogóle jest wypas :)

W sumie sam bym chętnie napisał własny edytor (bo nie mam wielkich potrzeb), ale obecnie nie mam na to czasu, dlatego szukam tymczasowego rozwiązania.

edytowany 1x, ostatnio: Goodrock
hauleth
Moderator
  • Rejestracja:około 17 lat
  • Ostatnio:12 dni
0

Koniecznie WYSWYG? Nie lepiej użyć jakiegoś LML'a?


GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

A co to jest LML?

hauleth
Lightweight Markup Language - lekki język znaczników, i. e. Markdown, BBCode, Textile czy Creole.
GO
O BBCode też myślałem. Jeśli bym tworzył własny edytor to chyba tylko w oparciu o BBCode.
hauleth
BBCode jest IMO beznadziejny, chyba że do forum, gdzie tak duże ograniczenia nie przeszkadzają.
bordeux
  • Rejestracja:około 18 lat
  • Ostatnio:7 miesięcy
  • Lokalizacja:Chorzów
  • Postów:1130
0

Z zgodnością z W3C xHTML jest mały problem, gdy chcesz zmienić kolor czcionki, powiększyć itp. Dlaczego? Edytory bazują na https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla#Executing_Commands
Nie wiem czemu, ale jest to metoda nie odświeżona - nadal używają font, chociaż mogą span.

Stworzyłem właśnie 2 tygodnie temu własny edytor WYSIWYG do swojego projektu -
http://code.google.com/p/html-5-wysiwyg/ - jeszcze nie ukończony, ale podstawowe rzeczy posiada.
źródło jest na svn


:)
edytowany 1x, ostatnio: bordeux
GO
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 10 lat
0

Nieźle bordeux. Pisząc, że nie ukończony pewnie masz na myśli głównie ilość funkcji, ale - nie wiem czy wiesz - w Chrome rozjeżdżają się elementy paska narzędziowego :) Ale mimo wszystko całkiem nieźle się ten edytorek prezentuje.

edytowany 2x, ostatnio: Goodrock
bordeux
byłbym radosny, gdybyś screena podesłał. Jeszcze nie testowałem go na innych komputerach ;]
GO
Niechaj radość twa nie zazna granic - w załączniku screen.
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około 13 godzin
  • Lokalizacja:Rzeszów
0

TinyMCE generuje poprawny kod XHTML 1.1 (takiego doctype używam na codzień), więc i 1.0 Strict i 1.0 Transitional będą ok. Nie używa znaczników typu font, align czy ciul wie czego.

bordeux - świetna robota. trochę problematycznie się go używa, ale zapowiada się nieźle :) tylko dlaczego jest problem z tabelkami w operze [niczym w tinymce] (nie można zmieniać rozmiaru, nie ma tych hoverujących ikonek do usuwania wiersza np) - skoro piszesz to na jquery ui to powinno działać tak po prostu?. menu kontekstowe widzę, że nie istnieje, bo spodziewałem się, że jak w tinymce nie działa tylko pod operą. no i żadnych opcji, ustawiania wlasnych klas elementom itd. nie chcę marudzić, tylko zwracam uwagę, że to (chyba) jeszcze nie 90%? i select all w operze działa zabawnie :D


SI
Menu kontekstowe TinyMCE działa w najnowszej wersji Opery.
dzek69
ło żesz, jeszcze niedawno byłem na stronie tinymce i wyglądała zupełnie inaczej. widzę, że trzeba zaktualizować tinymce..
bordeux
  • Rejestracja:około 18 lat
  • Ostatnio:7 miesięcy
  • Lokalizacja:Chorzów
  • Postów:1130
0
dzek69 napisał(a)

TinyMCE generuje poprawny kod XHTML 1.1 (takiego doctype używam na codzień), więc i 1.0 Strict i 1.0 Transitional będą ok. Nie używa znaczników typu font, align czy ciul wie czego.

bordeux - świetna robota. trochę problematycznie się go używa, ale zapowiada się nieźle :) tylko dlaczego jest problem z tabelkami w operze [niczym w tinymce] (nie można zmieniać rozmiaru, nie ma tych hoverujących ikonek do usuwania wiersza np) - skoro piszesz to na jquery ui to powinno działać tak po prostu?. menu kontekstowe widzę, że nie istnieje, bo spodziewałem się, że jak w tinymce nie działa tylko pod operą. no i żadnych opcji, ustawiania wlasnych klas elementom itd. nie chcę marudzić, tylko zwracam uwagę, że to (chyba) jeszcze nie 90%? i select all w operze działa zabawnie :D

Wykonanie takiego edytor to błahostka. Wszystkim zajmuje się execCommand + contenteditable . Ty jedynie robisz tylko interfejs. Moim założeniem był prosty, lekki edytorek, do potrzeb XVweb (niestety, tinyMCE nie dało możliwości wdrożenia własnych, nietypowych tagów, których można używać w moim CMS). Lecz kusi mnie by go rozbudować. Jedyne co się boje to jego waga...
jQuery natomiast tutaj szczerze mówiąc - jest używane do obsługi slidera - zmiany kolorów. jQuery nie jest używane do edycji tekstu.

Jedyne co mogę upewnić to, że dopisze do tego:

  • obsługa "resize" dla img (zgodnie z standardami EMCA tag IMG powinien mieć kontrolki przekształceń, czego niestety w Chrome o dziwo nie ma )
  • dodanie obsługi table (ikonki , resize, etc.) - obecnie można usuwać całe wiersze, tylko trzeba wiedzieć gdzie zaznaczać. Ja to rozkminiłem po 5 minutach na Chrome.
  • kod HTML/CSS będzie już osadzony w JS (obecnie trzeba osobno go wklejać, a css dynamicznie ładować - nie lubię gdy trzeba dodawać do kodu źródłowego osobno js, css - wole wstawić tylko odnośnik do .js i nie martwić się niczym)
  • edycja atrybutów - po kliknięciu na dany element, przeskakujemy do zakładki "Edycja" tak jak w Office 2010
  • myślę o jakieś funkcji tidy, która po 1 formatuje ładnie kod html , a po 2 konwertuje na xHTML5 (nie lubie czegoś takiego jak niedomykane tagi, będzie to zguba dla programistów, bo trudniej się pobiera wartości pomiędzy tagami - nie można użyć regexpa /<tag>(.*?)</tag/si )
  • jak będzie branie na edytorek, to w 2 wersji przepisze kod, używając czegoś innego niż execCommand - textRange, który pozwoli na większe możliwości.

Pracę mam zaplanowane nad tym po 25, gdy będę się nudził w szpitalu.

A co może zrobię:

  • menu kontekstowe. Dlaczego? Przyczyna jest prosta. Chrome, Firefox blokują schowek z poziomu JS. No jakbym "shookował" prawy przycisk myszy, jedyna opcja na kopiowanie tekstu to ctrl+c i wklejanie ctrl+v , a prawym przyciskiem już by się nie dało. Tak to wygląda z punktu "programistycznego". Lecz chyba ominę to komunikatem, by używał ctrl+c

:)
edytowany 2x, ostatnio: bordeux
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około 13 godzin
  • Lokalizacja:Rzeszów
0

Chrome, Firefox blokują schowek z poziomu JS. No jakbym "shookował" prawy przycisk myszy, jedyna opcja na kopiowanie tekstu to ctrl+c i wklejanie ctrl+v , a prawym przyciskiem już by się nie dało. Tak to wygląda z punktu "programistycznego". Lecz chyba ominę to komunikatem, by używał ctrl+c

o ile pamiętam flash umożliwia kopiowanie do schowka oraz z tego co pamiętam da się pchnąć wykonanie jakiejś akcji we flashu z poziomu js (bo w drugim kierunku na pewno) - więc z użyciem flasha byś zrobił taką protezę do kopiowania :P


bordeux
czy ja wiem. 1kb flash, + 7kb kodu ( http://bowser.effectgames.com/~jhuckaby/zeroclipboard/ ) specjalnie tylko do obsłużenia metody kopiuj - a później będzie musiał używać ctr+v lub ctrl+x by wkleić tekst -bo już tego obsłużyć w flashu sie nie da. Myślę że użytkownik już dorosnął do używania skrótów. Tego samego rozwiązania użyli w TinyMCE ;]
dzek69
w sumie racja, nie myślałem o wklejaniu. wycinanie byś zrobił :P
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)