Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Zaznaczenie tekstu do edycji
Forum PHP.pl > Forum > Przedszkole
castagir
Witam!

Robię prosty edytor tekstu na swoją stronę i potrzebuję pomocy w stworzeniu funkcji, która by wykrywała zaznaczony tekst w danym paragrafie lub pozycję gdzie znajduje się aktualnie ta kreska pionowa oznaczają miejsce od, którego pisze się tekst.

Na razie mam takie coś:
  1. var arkusz;
  2. $('.przyb').on('click', 'button', function(){
  3. arkusz = $(this).parent().parent().parent().find('.arkusz');
  4. trescCala = arkusz.html();
  5. zaznaczenie = arkusz.getSelection();
  6. start = arkusz.selectionStart;
  7. koniec = arkusz.selectionEnd;
  8. alert(trescCala+' '+zaznaczenie+' '+start+' '+koniec);
  9. });


Sam html wygląda tak:
  1. <li class="przyb-wizual">
  2. <ul class="przyb tlo-grad-1">
  3. <!--- tutaj znajduje się lista przycisków, które powinny aktywować funkcję -->
  4. </ul>
  5. <p class="arkusz" contenteditable="true">
  6.  
  7. </p>
  8. </li>


Chciałbym po wykryciu tego tekstu lub miejsca kreski pionowej wstawiać elementy HTML.
LowiczakPL
linia

arkusz = $(this).parent().parent().parent().find('.arkusz');

powinna wyglądać tak

var arkusz = $(".arkusz");

nie zapominaj o VAR jest to bardzo ważne inaczej wszystkie zmienne są globalne
castagir
Cytat(LowiczakPL @ 9.05.2016, 08:49:25 ) *
linia

arkusz = $(this).parent().parent().parent().find('.arkusz');

powinna wyglądać tak

var arkusz = $(".arkusz");

nie zapominaj o VAR jest to bardzo ważne inaczej wszystkie zmienne są globalne


Niestety nie może być to odniesienie bezpośrednie do tego elementu, gdyż mam dwa takie same elementy na w kodzie html.
A mi chodzi dokładnie o ten jeden element, dlatego jest taka długa ścieżka
szczemp
Cytat(castagir @ 9.05.2016, 09:01:19 ) *
Niestety nie może być to odniesienie bezpośrednie do tego elementu, gdyż mam dwa takie same elementy na w kodzie html.
A mi chodzi dokładnie o ten jeden element, dlatego jest taka długa ścieżka

To nadaj mu id.
castagir
Cytat(szczemp @ 9.05.2016, 12:51:27 ) *
To nadaj mu id.


Nie mogę mu nadać ID, gdyż mam dwa rodzaje edytorów: wizualny i html. Oba mają taki sam element w formularzu, którym jest właśnie element o klasie "arkusz", z którego jest pobierany jest tekst do wysłania. Poza tym to nie jest problem, który chcę rozwiązać.

PS: Siedzę na telefonie i niechcący kliknęło się "Pomógł". Da się to jakoś cofnąć?
LowiczakPL
sprawdź to

  1. var zaznaczonyText = "";
  2. if (window.getSelection) {
  3. zaznaczonyText = window.getSelection().toString();
  4. } else if (document.selection && document.selection.type != "Control") {
  5. zaznaczonyText = document.selection.createRange().text;
  6. }
  7.  
  8. console.log(zaznaczonyText);
zegarek84
już 5 lat nie pisałem nic przy edytorach ale coś tam pamiętam...
Cytat(castagir @ 9.05.2016, 08:23:02 ) *
Chciałbym po wykryciu tego tekstu lub miejsca kreski pionowej wstawiać elementy HTML.

to są 2 różne operacje... chcesz zastąpić zaznaczenie kodem html czy może wstawić html na początku/końcu zaznaczenia po czym przesunąć zaznaczenie??

rozwiązać to można na kilka sposobów...
jeśli chcesz zastąpić zaznaczenie kodem html to w IE masz pasteHTML a w pozostałych execCommand command insertHTML, zawsze też możesz usunąć treść po czym mając karetkę wstawić konkretny element wspierany przez wszystkie przeglądarki z unikalnym id czyli "hr", po czym możesz wykonać operacje DOM

jeśli wspierasz od IE9 i chcesz wstawić kod przed zaznaczeniem to masz metodę insertNode

ogólnie od IE9 masz baaaardzo wygodnie gdyż masz takie metody jak collapseToEnd oraz collapseToStart

ogólnie polecam zapoznanie się z kodem źródłowym jakiegoś prostego edytora np. CLEditor

jeszcze 5 lat temu musiałem nieźle gimnastykować się z brakiem kilku metod, filtrowaniem pewnych atrybutów i dozwolonych elementów html w manifo.pl, do niektórych zastosowań w treści musiałem wstawiać elementy html z unikalnymi id by mieć punkt zaczepienia...

pozdrawiam
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.