Custom Caret for each client on real-time connection - javascript

I have a tinyMCE editor with a SignalR Connection. Right now I am writing and formatting text on one client and receiving text on the other client in real-time with the use of SignalR. Now what I need to do is give a separate caret to each of the clients so that all clients sharing the same document can edit at the same time (same concept of Google Docs - separate cursors with the user's name or a specific color associated with the user). I am stuck on what to look for to be able to do this. Anybody has some useful links that I can look into?
EDIT: I have now looked through all the methods in tinyMCE and SignalR and noticed that there are no easy methods for this. After some thinking I came up with the idea to implement a custom caret myself. i.e. use a UNICODE character like | and place it at position 0 when a client opens a document. I need to give this character the behavior of a normal writing caret i.e. keep at the end of the text and move to a position upon clicking a certain area in the document. Do you guys think it is a good idea?

Related

Adding text to clipboard (or pasting to cursor) in Chrome extension V3

I'm building extension for Chrome using manifest V3. Interaction I'm trying to achieve is:
User clicks a button in context menu.
Extension communicates with the server and receives some string in response.
User clicks another button in context menu and said string gets pasted where their cursor is.
I see two ways I could achieve it and I'm not sure which one makes more sense (or how to get either to work, really):
One would be to have said string put into clipboard and then have user access it with paste command.
Second would be to have a separate context menu button which upon pressing pastes the string where the cursor is.
Either solution would work for me, however I prefer one that asks for less permissions from user (I'm already accessing storage, requests and context menus). So far I was also able to avoid using background workers and event pages, which provided some convenience when working with context menus - I'd like to keep it that way, but I'd rather have my extensions actually working ^^
Unfortunately Chrome documentation is rather confusing, bordering on circular, when explaining how to achieve something like this, especially within Manifest V3. How do I go about it?

Is it possible to have a text area sent as a hyperlink and retain it's value?

Trying to have a page with a text area in which you input a value and then have the ability to send that page to someone else with a hyperlink and the text area would still retain the inputed value. Similar to Google docs share feature.
Looking where to start researching and any relevant resources to build this functionality.
You might want to take a look at:
- Javascript & jQuery (but I guess you are already aware of those).
- MySQL for more advanced use, or GET for easy use (PHP)
- jQuery .html function
- $.ajax function

Google-translate alike front-end

As many people have used google translation, I want to create a website like "translate.google.com" based on my own machine translation system. I hope somebody can help me with the following questions since I'm not experienced in web development, .
The input area of google-translate is a textarea . When a user hovers on the target phrase, the corresponding source phrase was highlighted. How can I achieve such effects? Do I need to modify the textarea or use span-like control?
The output area of google-translate seems to be not a textarea. When a user clicks on the target phrase, it triggered an event and make communication with the back-end, then the corresponding translation options are displayed right on the target phrase. I want to make the position of the translation options the same as google-translate, how can I achieve this without refreshing the whole page?
Any comment will be welcome.

Insert multimedia message to MySQL database using PHP and Javascript

I was working on a website for which I was designing the conversation system (Post, comment, like, etc.) like what all social networking sites have.
I am trying to provide option for inserting smileys along with the normal text content in a textarea.
My Questions
How do I add images like smileys in a textarea (which accepts only text by default) as and when user selects one from the list or puts in the symbol
Once I have the textarea with smileys and normal text, what is the best way to store it in the MySQL database
When displaying the message with smileys, what is the best way to parse the message from the database
NOTE
I am aware of developing a conversation system with just plain text and files. I am just not sure how to add,store,display smileys.
I am already aware of plugins like Tinymce: http://www.tinymce.com/tryit/basic.php
But I want to know how to make my own.
textarea can't be used to display images,use a contenteditable div instead.
As for the backend,store data in the database regularly (ex: Store :) directly)
and maintain a common table/array where you replace these text with the image/smiley each time you display the data.
Wouldn't having some kind of inline notation help here? You could have something like [::smiley-XXX::] where that represents a particular smile. So long as it's something users are unlikely to type by accident it'll be fine.
Then you need a way of converting that from text into HTML, where you inline the appropriate image.

Is there any good back-end independent HTML/CSS/JS widget for many-to-many/has_many relations with XHR filtering?

I've been looking around for a good back-end independent HTML/CSS/JS widget for many-to-many/has_many relations with XHR filtering and I can't seem to find any.
I find hard to believe people are constantly re-inventing this wheel.
What am I missing?
EDIT: Ok, from the number of people that didn't understand it, this was a crappy question.
I believe that regular web interactions should come at minimal cost (it should either already be in HTML or a package install away).
That's true for most cases. However, I'm having a hard time finding something for picking up an item from a collection (Not autocomplete, something more elaborate than merely a string. If you want an example, assume you want to pick users and have their avatar displayed while picking.).
Picture this:
When you want the user to provide
a short string in a form, you give them an input box
a long text in a form, you give them a text area
a piece of HTML (for a blog post's body, for example), you give them a text area with CKEditor or TinyMCE
pick something from a short list, you give them a drop down menu (like a select box)
a string based on a wide range of known alternatives, you give them an input box with autocomplete (jQuery UI Autocomplete, YUI Autocomplete, etc..)
a set of items from a wide range of options, you give them... drumroll...
I don't know! And that's my question. I've searched a bit and could only come up with jquery-tokeninput as a credible option.

Categories