Come simulare un segno di omissione artificiale in un'area di testo?

Question

Quello che sto cercando di fare è qualcosa di simile a come funziona l'editor collaborativo. Voglio consentire a due persone di modificare lo stesso documento. E per questo devo simulare un accenno artificiale. Posso estrarre l'attività dell'altro utente in termini di aggiunta e cancellazione nella posizione specificata in una textarea.

Trasmetterò quindi la posizione, insieme all'azione sull'altro documento. Lì ho bisogno di effettuare la modifica richiesta alle coordinate inviate. Ho cercato e trovato abbastanza modi per impostare la posizione del cursore e inserire o eliminare il testo nella posizione corrente del cursore, ma il problema è che il cursore del documento si sposta nella posizione in cui apporto la modifica.

Non voglio quello, voglio avere due segnali, uno ciascuno per i due utenti. Trasmetti le loro modifiche ai rispettivi documenti e apporta le modifiche nelle rispettive posizioni, mentre mostra due diversi segnali.

Ho solo bisogno di sapere se ci sono alcune librerie che posso usare, o anche se devo farlo da solo, allora come e dove devo iniziare. Non so nemmeno come sia rappresentata una textarea all'interno di un browser. Come posso caratterizzare le posizioni all'interno di una textarea, se lo so, allora salverò le posizioni in memoria e apporterò le modifiche in base all'input ricevuto.

Spero di avere un senso, grazie per qualsiasi aiuto.

Answer 1

hai visto questo?

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

Ecco come Google docs lo fa:

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

Answer 2

Si potrebbe imitare un accento circonflesso con un carattere speciale e fare la regex per inserire il testo compagno e muovere il cursore, e puoi usare quello vero. Questo è il disegno più semplice che io possa pensare. Per ottenere l'idead, è possibile utilizzare la pipa | come un cursore artificiale. ma questo potrebbe facilmente entrare in conflitto con l'utente inserendo una pipe, per evitare che questo possa usare una sorta di combinazione insolita, o trovare qualche carattere unicode per agire come un segno di omissione.

Una soluzione reale ma molto più complicata non è l'utilizzo di un'area di testo e l'utilizzo di un DIV. ciò significa che è necessario gestire tutti gli eventi dei tasti e inserire il carattere premuto manualmente sul documento e registrare la posizione del cursore. Ma in questo modo puoi inserire quanti padiglioni vuoi non solo 2, qualcosa come questo <span class="caret1"></span> puoi farlo lampeggiare, stile con css, avere colori diversi per ogni cursore, ecc.

Answer 3

Hai provato Draft.js, da Facebook ? https://facebook.github.io/draft-js/

"Draft.js è un framework per la creazione di rich editor di testo a reagire, alimentati da un modello immutabile e astrarre sulle differenze cross-browser.

Draft.js rende facile costruire qualsiasi tipo di input di testo ricco , se stai solo cercando di supportare alcuni stili di testo incorporati o di creare un editor di testo complesso per comporre articoli di forma lunga.

In Draft.js, tutto è personalizzabile - forniamo i blocchi di costruzione in modo da avere pieno controllo sull'interfaccia utente. "