Pracuję nad własnym edytorem tekstu, takim, który nie modyfikuje formatowania html przekazanego do treści, a raczej naśladuje formatowanie już istniejące.
Szukałem takiego edytora w necie, ale chyba takiego nie ma.
Sprawdzałem ckeditor na milion sposobów, quill, tinymce w ogóle dodaje mnóstwo swojego kodu.
Jak znacie taki edytor, który spełnia ww. wymagania to napiszcie.
Będę ten edytor wdrażał w swoim projekcie pewnym, to będziecie mogli sobie go przetestować jak działa, a jak ktoś będzie chciał to zrobię go może w formie paczki i udostępnie.
0
0
Jakikolwiek edytor jak mu podasz template (chodzi mi o opcje w ustawieniach) w jakim chcesz formatować to tak będzie formatować i ci nic nie zmieni jak wkleisz coś już sformatowanego.
0
Nie prawda, zmienia każdy, dodaje własne taby lubich brak itp.
Poza tym zmienia formatowanie kodu, jaki został przekazany.
Testowałem kilka edytorów i każdy zmienia, bo używają parametru "editable", który jest słaby po prostu, kiedy chcemy mieć nie zmodyfikowany kod html.
0
W inrellij masz moiwksc ustawić template i wszystkie parametry włącznie ze spacjami i tabami. To samo w VSC
0
Przecież Ty wymieniłeś IDE, a nie paczki edytorów tekstu do użycia na stronie www.
1
który nie modyfikuje formatowania html przekazanego do treści, a raczej naśladuje formatowanie już istniejące.
co masz na myśli dokładnie? Co chcesz osiągnąć?
Pracuję nad własnym edytorem tekstu,
Tzn. twoim celem jest napisanie własnego edytora tekstu? Czy celem jest napisanie aplikacji?
0
Chcę osiągnąć coś takiego, że np.:
<body>
<h1>My First Heading
<br>
<br>
<br>
</h1>
<br>
<br>
<br>
<p>Test</p>
<br>
<br>
<br>
<p>My first paragraph.</p>
</body>
Mając takie body jak wyżej, żeby edytor, nie zmieniał w nim nic, oprócz dodania tekstu w miejscu jego dodania, plus, jeżeli dodaję nowy element np. p pod innym p, to, żeby ilość tabów była taka sama jak w p poprzedzającym (takie jakby naśladowanie formatowania)
Ckeditor robi tak, że modyfikuje cały content, niezależnie od ustawień formatowania, formatuje tak jak sobie to ustawie w edytorze lub jak nic nie ustawie to wszystko równa do lewej, usuwa wszystkie taby, a Ja chce, żeby nie ruszał tego, czego nie modyfikuje.
Quill jest jeszcze gorszy od ckeditora pod tym względem, bo ma mniej opcji, a TinyMce to już w ogóle.
Tzn. twoim celem jest napisanie własnego edytora tekstu? Czy celem jest napisanie aplikacji?
Celem jest napisanie apki, ale wymaga ona takiego właśnie typu edytora, bo user zamiennie może w niej pracować na edytorze kodu i tekstu.
Dlatego jak napisze sobie jakiś kod w edytorze kodu, a później sobie napisze jakieś zdanie w edytorze tekstu, to formatowanie ma zostać nieruszone.
0
a inne edytory sprawdzałeś? np. ProseMirror, Draft.js (do React). W którymś edytorze pamiętam było tak, że było takie jakby AST i można było w sposób ścisły wrzucić konkretne drzewko (chyba w Quill albo Draft.js). Zresztą ogólnie ja bym się nie poddawał tak wcześnie, bo są w edytorach różne opcje, eventy itp.
Przypuszczam, że w tym temacie najlepiej jest po prostu poświęcić z tydzień na research i objechanie wszystkich możliwych edytorów i sprawdzenie, który edytor spełnia twoją potrzebę. Pewnie będzie to szybsze niż zrobienie własnego edytora.
0
Robiłem research, pisze w Vue, czemu zakładasz, że nie robiłem?
Wszystkie edytory bazują na parametrze editable.
https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Editable_content
Jest on średnim rozwiązaniem już sam w sobie, bo ma ograniczone możliwości wpływania na formatowanie, które też różni sie dla różnych przeglądarek.
Plus każdy edytor formatuje na własny sposób, zdefiniowany przez api lub nie, ale wpływa na całą zawartość.
0
Napisałeś tego posta tak, że dopiero jak wspomniałeś o contenteditable, to upewniłam się, o co właściwie ci chodzi.
Napisanie własnego edytora w oparciu o contenteditable jest banalne, ale też (jak już zauważyłeś) wiąże się z pewnymi ograniczeniami, które wynikają z faktu, że 99.x% roboty jest tu wykonywane przez samą przeglądarkę wedle jej własnego widzimisię.
Podejście odwrotne, czyli pisanie własnego renderera? Teoretycznie jest możliwe, ale zakrawa na jakieś szaleństwo. Równie dobrze możesz od razu zacząć pisać własny silnik przeglądarki.
Niemniej przepuściłam twój kod przez taki edytor, dodałam w nim dwa "abc" i wynik wygląda tak:
<h1>My First Heading
<br>
<br>
<br>
</h1>
<br>
<br>
<br>
<p>Test</p><p>abc<br></p>
<br>
<br>
<br>
<p>My first paragraph.</p><p>abc<br></p>
Co ci w powyższym nie pasi?
0
Z edytorów polecam https://froala.com . Przerobiłem ją już na dziesiątki sposobów i poza tym, że troche configu trzeba się napisać aby poblokować np niechciane feature to poza tym polecam :). Minus taki, że trochę kosztuje :p.
1
A ja spytam o coś innego - w czym Ci przeszkadza takie "brzydkie" formatowanie kodu, który oddajesz do dyspozycji użytkownikowi? Wg mnie ważne jest, żeby kod był poprawny, tagi podomykane i jak najmniej zbędnych śmieci w atrybutach.
Normalnie na środowiskach produkcyjnych przecież html, css i js jest minifikowane do bólu wręcz. A jeśli już chcesz przedstawiać użytkownikowi ładny kod html przy edycji - to może użyj "biutifajera" :D -
https://www.freeformatter.com/html-formatter.html (na stronie głównej mają więcej tego). Tak więc szukałbym może czegoś w stylu html beautify, albo html code formatter library.
Tak czy siak sprawa sprowadza się do jednego pytania - dlaczego chcesz mieć ten kod sformatowany?
0
Napisałem o tym we wcześniejszym poście:
Celem jest napisanie apki, ale wymaga ona takiego właśnie typu edytora, bo user zamiennie może w niej pracować na edytorze kodu i tekstu.
Dlatego jak napisze sobie jakiś kod w edytorze kodu, a później sobie napisze jakieś zdanie w edytorze tekstu, to formatowanie ma zostać nieruszone.
@Freja Draco
Niemniej przepuściłam twój kod przez taki edytor, dodałam w nim dwa "abc" i wynik wygląda tak:
Przepuściłaś przez contenteditable? W gruncie rzeczy nie pasi mi to, że tag p jest obok p, a powinien być pod spodem z takim samym wcięciem jak p wyżej.
Może to wydawać się pierdołą, ale jak stworzysz sobie fajnie sformatowany duży dokument html, a później jak sobie go będziesz edytował w edytorze tekstu, który dorzuca kod w taki sposób, to Ci się wszystko rozwali, i po przejściu z powrotem do edytora kodu, będzie trzeba ponownie wszystko ustawiać jak było.
Będzie to dla użytkownika na 100% frustrujące, dlatego chcę ten problem zlikwidować.
Teoretycznie jest możliwe, ale zakrawa na jakieś szaleństwo
Ciekawa opinia, zobacz sobie jak edytory kodu są napisane, np. ace editor, nie korzysta w ogóle z contenteditable.
Szaleństwo czy nie, ale kursor już mam ogarnięty, więc teraz tylko dodam inputa i będę przechwytywał sobie znaki, jakie wprowadza użytkownik, tak jak w ace.
1
omenomn2 napisał(a):
Przepuściłaś przez contenteditable?
Pierwotny kod wkleiłam w txt. Później edytowałam w contenteditable.
W gruncie rzeczy nie pasi mi to, że tag p jest obok p, a powinien być pod spodem z takim samym wcięciem jak p wyżej.
No to spróbuj dodawać po każdym <br> i </p> znak \n wraz taką samą liczbą spacji, jak znaleziona w poprzednim wierszu.
Ciekawa opinia, zobacz sobie jak edytory kodu są napisane, np. ace editor, nie korzysta w ogóle z contenteditable.
Szaleństwo czy nie, ale kursor już mam ogarnięty, więc teraz tylko dodam inputa i będę przechwytywał sobie znaki, jakie wprowadza użytkownik, tak jak w ace.
Hm... czyli, że za WYSIWYG odpowiada nieedytowalny div z zawartością, a ty go modyfikujesz JS-em w oparciu o znaki z klawiatury i akcje kursora?
Przyznam - nie pomyślałam.Tak by to faktycznie mogło zadziałać.