[JavaScript]Zaznaczenie tekstu do edycji Opcje

[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ś:

[HTML] pobierz, plaintext 
var arkusz;
$('.przyb').on('click', 'button', function(){
	arkusz = $(this).parent().parent().parent().find('.arkusz');
	trescCala = arkusz.html();
	zaznaczenie = arkusz.getSelection();
	start = arkusz.selectionStart;
	koniec = arkusz.selectionEnd;
	alert(trescCala+' '+zaznaczenie+' '+start+' '+koniec);
});
[HTML] pobierz, plaintext 

Sam html wygląda tak:

[HTML] pobierz, plaintext 
<li class="przyb-wizual">
		<ul class="przyb tlo-grad-1">
			<!--- tutaj znajduje się lista przycisków, które powinny aktywować funkcję -->
		</ul>
		<p class="arkusz" contenteditable="true">
 
		</p>
	</li>
[HTML] pobierz, plaintext 

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

[rad11]

https://www.google.pl/webhp?sourceid=chrome...on+in+paragraph

[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

Ten post edytował LowiczakPL 9.05.2016, 07:52:43

[castagir]

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]

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]

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ąć?

Ten post edytował castagir 9.05.2016, 14:01:37

[LowiczakPL]

sprawdź to

[PHP] pobierz, plaintext 
 var zaznaczonyText = "";
    if (window.getSelection) {
        zaznaczonyText = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        zaznaczonyText = document.selection.createRange().text;
    }
 
    console.log(zaznaczonyText); 
[PHP] pobierz, plaintext 

[zegarek84]

już 5 lat nie pisałem nic przy edytorach ale coś tam pamiętam...

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

Ten post edytował zegarek84 9.05.2016, 16:44:41