Witajcie tydzień temu wspomniałem na forum o własnym wysiwigu tak dla skilla i satysfakcji jednak pojawiły sie pierwsze problemy... Projekt ma charakter pluginu tak żeby można go było w przyszłości używać.

Problem: Zaznaczam tekst i od razu wywołuje mi się funkcja z eventów jak to zablokować? Chce najpierw zaznaczyć potem kliknąć w pogrubienie i pogrubić. Poza tym span robi się w spanie? :/

[HTML] pobierz, plaintext 
<script>
    Wysiwyg.prototype.select = function() {
        toggleToolBar.call(this);
        getSelectedText.call(this);
        initializeEvents.call(this);
 
    }
</script>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script>
function initializeEvents() {
 
        if (Wysiwyg.selectionString) {
            $('.wysiwyg-font-weight').on('click', wrap('span', 'fontWeight', 'bold')); 
        }
 
    }
</script>
[HTML] pobierz, plaintext 

Cały projekt http://codepen.io/anon/pen/jboOMG

Ps. krytyka mile widziana! dopiero zaczynam sie uczyć pisać w javascripcie (wcześniej jQuery Spaghetti) więc uwagi będą cenne

Weź to wrzuć na GH, jak każdy normalny człowiek. CodePen jest od pokazywania fajnych efektów w CSS, a nie tego typu skryptów.


Raczej:

witam ponownie, przeleciałem sporą część internetu i nie mogę sobie poradzić z hmm detektorem? wykrywającym zmianę szerokości diva

[HTML] pobierz, plaintext 
$('.wysiwyg-page-text')
[HTML] pobierz, plaintext 

link do projektu : https://github.com/wroblja/Bootstrap-A4-WYSIWYG-Editor

dzięki temu obsłużę nie tylko klawisz Enter czy Backpase ale np wklejenie zdjęcia przez użytkownika czy zwyczajne wklejenie tekstu...

Ps. Drogi Moderatorze proszę w takim razie usunąć tamten temat, będę rozwijać ten.

A do czego Ci to potrzebne?

Coś to, panie, od tyłka strony się za to zabierasz
Wszystko de facto da się obsłużyć eventami: keyup, paste… O ile się nie mylę, dodatkowo wszystkie zmiany można przechwytywać przez MutationObserver, ale IMO zdarzenia powinny wystarczyć.

Cześć wiedziałem że na was 2 można liczyć już prostuje o co mi chodzi... Założeniem mojego edytora jest to że tekst dziele na strony jak w wordzie aby mógł to zrobić badam wysokośc kontenera jeżeli przekroczy wysokośc jednej strony (29.7cm) to pod spodem skrypt dodaje koleją strone w tle. Zależy mi na tym żeby skrypt reagował na wklejenie np zdjęcia przy pomocy funkcji w moim wysiwigu jak i np przez zwykłe kopiuj wklej prawym przyciskiem myszy czy ctrl+v. Na razie na urządzenia mobilne nie patrze... aby mieć pewność że żadne zachowanie użytkownika mnie nie zaskoczy myślę o śledzeniu wysokości kontenera. Co o tym myślicie?

Ps. Przy okazji wiem że da się zbindować komendę np. "ctrl + z" i dodać do niej własną funkcję. Ale czy da się tak w drugą strone np zrobie

[HTML] pobierz, plaintext 
<button class="btn undo">Cofnij</button>
[HTML] pobierz, plaintext 

i jakimś magicznym sposobem zachowa się jak po kliknięciu ctrl + z. hmm?

Wysokość a szerokość robi lekką różnicę

Co do wychwytywania tego, to nie ma event'ów na zmianę wysokości elementu (przynajmniej ja nie znam). Zatem powinieneś się skupić na zdarzeniach wklejania, ale także zwykłego pisania (pisząc tekst też można przecież go stworzyć tyle, że będzie musiał zostać podzielony). Zatem do obsługi masz każdą możliwą drogę wprowadzenia contentu (wklejanie, d&d, pisanie).


Co do CTRL+Z to wystarczy, że przechwycisz zdarzenie naciśnięcia odpowiednich klawiszy i wywołasz odpowiednią funkcję. Dalej bindujesz kinięcie w swój przycisk do tej funkcji i masz ten sam efekt.

Co prawda eventów na zmianę rozmiarów nie ma, ale jak mówiłem dałoby się ogarnąć to dzięki MutationObserverowi. Niemniej słuchanie zdarzeń związanych z poszczególnymi akcjami wydaje się leppszym rozwiązaniem.

yyy jak to przechwycić? jakiś przykład?


w jaki sposób po dodaniu diva na koniec zawartości danego elementu (append) przenieść za ten nowo dodany element focus?

https://github.com/sdecima/javascript-detect-element-resize

Polecam sprawdzić jakie własności mają zdarzenia klawiatury.