I am creating a basic editor using slate.js and React.js.
I want to insert text inside the editor at current selected position when i click on a card outside the editor i.e. when i click on a card containing a text, the card on text should get inserted at the last cursor position in slate.js editor.
You don't need to get cursor position. Slate remembers selection when you click your button. You just need to insert content:
editor.insertBlock(...)
Related
When selecting text in the textarea cursor position and selection, I can get the read properties of textarea.selectionStart, textarea.selectionEnd and textarea.selectionDirection (Figure 1).
If you start dragging the selected text, an additional cursor appears, where the selected fragment will be transferred when the transfer is completed (Figure 2).
How do I get the position of the additional cursor at the 'dragover' event?
I have a contenteditable div with a span inside it.The div is of type input. The div also contains a button in the right corner.When you click the button a popup menu shows a list of emoticons and when I click on an icon I need to add it to the cursor position in the div. I have looked at Tim Down's solutions but couldn't get it to work.
Get caret (cursor) position in contentEditable area containing HTML content
and
Insert html at caret in a contenteditable div
The problem is that the div is not the only element on the page and is not necessarily on focus when user clicks on button to insert Emoticon. Also apart from the span tag the div may or may not contain text when the user clicks the button.
Any help to get the correct cursor position and insert the icon at the position is appreciated.
I am currently making rich text editor with maths equation writing.
As per above image you can see yellow marker which is mathquill-editable span.
and i made button with containing some maths symbols.
What I want!!
When user click button than equation should be print at cursor location.
I selected mathquill-editable span with class.
example $('#classname') for write equation from button.
Its works fine but problem comes when I add another mathquill-editable span.
When multiple span are there than every time when i click button than their value printed in every class at same time.
How I detect particular span is active and value will print on cursor's span only.
This is my little efforts to find just one element from all class.
$(document).ready(function(){ /* when the page has loaded... */
$('.mathquill-editable').click(function(){ /* ...bind click event to .boxSet elements */
$('.mathquill-editable').removeClass('hilite'); /* On click, remove any 'hilite' class */
$(this).addClass('hilite'); /* ...and add 'hilite' class to clicked element */
});
});
DEMO HERE
I want to set cursor position manually to specific position in CKEditor. I have implemented short keys on some key press i am adding text using set data in CKEditor (e.g. if i type "RnD+Space", it will replace with "research and development "). The problem is that after set data cursor will set to last at the end of all text.
I want cursor will be there, where the text is replaced. Is this possible?
I'm trying to figure out how to select only the visible text in a textarea box. So if there is a vertical scroll bar, any text outside the textarea box's dimensions would not be selected.
I basically want to retrieve the string/value of the visible portion. How to do this?