Jak symulować sztuczną kurtynę w obszarze tekstowym?

Question

Co próbuję zrobić, to coś podobnego do tego, jak działa edytor współpracy. Chcę zezwolić dwóm osobom na edycję tego samego dokumentu. I do tego muszę zasymulować sztuczną kurtynę. Mogę wyodrębnić aktywność innego użytkownika w czasie dodawania i usuwania w określonej lokalizacji w obszarze tekstowym.

Następnie przekażę lokalizację wraz z działaniem do drugiego dokumentu. Tam potrzebuję przeprowadzić wymaganą zmianę na wysłanej współrzędnej. Przeszukałem i znalazłem wystarczająco dużo sposobów, aby ustawić lokalizację opiekuna i wstawić lub usunąć tekst w aktualnej lokalizacji opiekuna, ale problem polega na tym, że karetka dokumentu przesuwa się do miejsca, w którym dokonuję zmiany.

Nie chcę tego, chcę mieć dwie wózki, po jednej dla dwóch użytkowników. Prześlij swoje zmiany do siebie i dokonaj zmian w odpowiednich lokalizacjach, pokazując dwie różne opiekunki.

Po prostu muszę wiedzieć, czy istnieją pewne biblioteki, z których mogę korzystać, lub nawet jeśli muszę to zrobić samodzielnie, to jak i gdzie mam zacząć. Nie wiem nawet, w jaki sposób obszar tekstowy jest reprezentowany w przeglądarce. Jak mogę scharakteryzować lokalizacje w obrębie obszaru tekstowego, jeśli wiem, że następnie zapisuję lokalizacje w pamięci i wprowadzam zmiany na podstawie otrzymanych danych wejściowych.

Mam nadzieję, że mam sens, dziękuję za pomoc.

Answer 1

Widziałeś to?

https://github.com/benjamn/kix-standalone/

To jak Dokumenty Google to robi:

https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html

Answer 2

Można naśladować daszek ze szczególnym charakterem i zrobić regex aby wstawić tekst partnera i przenieść swój daszek, i możesz użyć prawdziwego. To jest najprostszy projekt, jaki mogę sobie wyobrazić. Aby uzyskać idead, można użyć rury | jako sztucznego kija. ale może to łatwo doprowadzić do konfliktu z wstawieniem przez użytkownika potoku, aby tego uniknąć, możesz użyć nietypowej kombinacji lub znaleźć jakiś znak Unicode, który działa jak karetka.

Prawdziwym rozwiązaniem, ale o wiele bardziej skomplikowanym, nie jest używanie obszaru tekstowego i używanie DIV. oznacza to, że musisz obsłużyć wszystkie kluczowe zdarzenia i wstawić znak wciśnięty ręcznie do dokumentu i zarejestrować pozycję kursora. Ale w ten sposób możesz wstawić, ile oczek nie chcesz, tylko 2, coś w tym stylu: <span class="caret1"></span> możesz sprawić, żeby migało, styl css, mieć inny kolor dla każdej karetki, itp.

Answer 3

Czy wypróbowałeś Draft.js, od Facebook ? https://facebook.github.io/draft-js/

„Draft.js to framework do budowania bogatych edytorów tekstowych w zareagować, zasilanych przez niezmiennej modelu i abstrahując nad różnicami w różnych przeglądarkach.

Draft.js ułatwia zbudować każdy rodzaj bogatej wprowadzania tekstu Niezależnie od tego, czy chcesz obsługiwać kilka wbudowanych stylów tekstu, czy budować skomplikowany edytor tekstowy do komponowania długich artykułów.

W Draft.js wszystko można dostosować do własnych potrzeb - zapewniamy klocki, dzięki którym będziesz mieć pełne kontrola nad interfejsem użytkownika. "