Mam dwa proste textareas, w których chcę zaznaczyć napisany kod javascript. Gdy tylko użytkownik wpisze funkcję w polu tekstowym, słowa kluczowe itp. Muszą być wyświetlane w innym kolorze lub innym.Proste podświetlanie Javascriptem w obszarze tekstowym?
Próbowałem zhakować to script. Ale nie mogłem dostać tego, co chciałem.
Zawsze byłem zainteresowany posiadaniem textarea elementy z dodatkowych funkcji, takich jak kod podkreślając, jednocześnie pozostały jako proste edytowalne obszary tekstowe. Trochę tu eksperymentowałem: http://www.dcc.uchile.cl/~jmunoz/
To daleki od optymalnego i dość kłopotliwego, ale mimo to ... Pozwala na podświetlanie tekstu za pomocą dowolnych reguł. Miałem roboczą wersję, która pozwalała zmienić kolor tekstu (I nie tylko tło), ale Miał pewne problemy.
Zasadniczo to, co robię, to dodawanie nakładki div z dokładnie taką samą zawartością i stylem czcionki co obszar tekstowy, ale z przezroczystymi czcionkami. Tekst wewnątrz ma span elementy owijania pewnych słów i zwrotów, które mogą mieć szczególne tła, obramowania itd
Aby umożliwić różne kolory czcionek, próbowałem zrobić tekst textarea przejrzysty pokazując tekst nakładki div. Głównym problemem było to, że kursor również stał się przezroczysty.
Powiedziałbym, że użycie opcji div z opcją edycji wydaje się znacznie lepszą opcją.
Można sprawdzić Ace (demo) i CodeMirror (demo).
Przypuszczam, że przydadzą Ci się również pytania: Textarea that can do syntax highlighting on the fly? i Online Code Editor.
Ponieważ obszar tekstowy nie może zawierać znaczników, nie można tego podświetlać jako takiego. Podejście zastosowane do wbudowanego sprawdzania pisowni polegało na nakładaniu elementów div na słowa, które zostały napisane niepoprawnie. Było to możliwe, ponieważ w tekście można było uzyskać lokalizację słów x i y.
Jednak może być pożądane, aby nakładać tekst na edytowalny element div, który pozwalałby na zawijanie treści w przedziałach itp., A następnie stosowanie stylizacji.
Myślę, że możesz użyć znacznika div lub section z atrybutem edycji treści. Wewnątrz tego elementu lub sekcji można użyć dodatkowego znacznika dla funkcji higlight, vars itp. Jednak ten atrybut działa tylko w nowych przeglądarkach obsługujących edytowalną zawartość atrybutów html5. Oto demo
Jeśli potrzebujesz prostego js highligter, może być to jeden https://github.com/cloudhead/hijs jest przydatna dla zadania
Dokładnie tego szukałem. Będę grał z twoim kodem przez chwilę. – Rahul
Czy nadal mogę otrzymać nagrodę? lol. Ale tak naprawdę, nie ufajcie temu kodowi za bardzo, byłem wówczas mniej doświadczonym programistą. Możesz zrobić z tym, co chcesz, ale gdybym był tobą, użyłbym go tylko jako odniesienia i zbudowałbym go od zera. –
Mam nadzieję, że dostaniesz lol. Tworzę od zera, po prostu potrzebowałem prostego kodu podstawowego, aby zacząć i stworzyć dla niego odpowiednią bibliotekę :) – Rahul