I have configured the tinyMCE editor with a custom context menu. When I right-click on any word in the editor, the chosen word gets highlighted. I am able to get the selected text with editor.selection.getContent().
How do I get the start and end points of the selected text within the entire text that is currently in the tinyMCE editor? I tried editor.selection.getStart() and getEnd(), but that has not yielded enough results.
My task is to take the start and end indices and get the previous word with it. I am currently using tinymce-3.5.10.
You will need to use
var range = editor.selection.getRng()
to get a range. You can get the start- and end-container using
range.startContainer
range.endContainer
Related
1]: https://i.stack.imgur.com/USZOJ.png
My Requirement is i want to copy paste data to this textbox. after copying text its formatting should not change,
one should be able to change the font size , font etc.
If data contains paragraph and table then it can be pasted in
its own format.
Text color and table border color in the textbox should be changed to
white irrespective of original format color.
Table layout should not get disturbed in textbox.
**
i have found solution on this and i have achieved it in web based
TinyMCE editor and JavaScript, i am using window speech synthesis to
read the copied data in to the editor , when i click on read button
it reads the data but i need to highlight the read word when it is
being Spoken
**
There are two main ways to get the job done:
Using the HTMLBody property of Outlook items which returns or sets a string representing the HTML body of the specified item. The HTMLBody property should be an HTML syntax string.
Using the Word editor. The WordEditor property of the Inspector class returns an instance of the Word Document which represents the message body.
See Chapter 17: Working with Item Bodies for more information.
First, Using OfficeJS/WordJS how can I select text in a paragraph by index and length. For example, my paragraph has 100 characters and I need to select all from index 2 till index 16.
Second, When I found this range - how I can add an event handler for this range? I mean, when user click at 2-16 chars in my paragraph - I will show some useful information in my Add-in.
I'm using Word 2016 Add-in.
Thanks!
I recommend you to explore the Range functionalities we added as part of the 1.3 update who is in preview right now. Please follow the instructions here on how to try the preview. please explore the added Range object functionalities (all whose Req set are 1.3 in the last column)
Please explore the "split" functionality who enables you to split a paragraph into chunks of ranges when a set of delimiters is provided. For instance you can specify a space (" ") delimiter and get all the words in that paragraph. Check this example (exercise 7 on the lab) that splits a paragraph into words.
In conjunction with the split functionality, you can use getRange and expandTo methods to expand a range. (so you get from index 'x' to 'y'
on your second question. Once you have the range, you can wrap it with a titled content control (range.insertContentControl and then specify a title for it), so that you can use the Office.context.bindings.addToNamedItemAsync API to create a Textbinding and subscribe to the BindingSelected event, as shown on this example.
Hope this guides you in the right direction.
I get the cursor position at time a. Then I get the cursor position at time b. I want to make a range from the cursor position at time a to the cursor position at time b. Time a and b are start and end of ctr-v (paste).
I get the cursor position like so - or rather a range at the cursor position.
sel = window.getSelection();
range_time_a = sel.getRangeAt(0).collapse(true);
But, how do I use range_time_a and range_time_b to create a new range that starts at range_time_a and ends at range_time_b?
I have seen code to get the element with the cursor and to get the offset within that element. I could use that for setStart() and setEnd, but it seems like there should be an easier way since I've already got two ranges.
EDIT This actually won't give you what you're looking for... This is really complicated. My initial suggestion of commonAnscestorContainer.innerHTML will give you too much back (all the HTML of the closest parent container to your selection).
First, you're probably going to want to trigger this code on an eventHandler that fires when the user presses ctrl+c (discussion here: How to detect Ctrl+V, Ctrl+C using JavaScript?).
If you only want to get the text selected, that's easily done:
range = window.getSelection().toString();
You don't need to check the selection at various times - you only need to capture it at the point the user hits ctrl-c.
getSelection is not meant for capturing the HTML of a selection. You can capture text & remove text, move to the start/end of the selection and a bunch of other things described here, but you can't grab HTML.
Big part of the problem is that this isn't part of any stanfard spec (see this link). Another reason its not consistent across browsers, or supported in IE7/8.
Some non-standards based examples of how to get more info out of range selections can be found here if you really need to do this - Get a range's start and end offset's relative to its parent container
I have been trying to select text in a textarea programatically based on start and end indexes, but for some reason the selection is offset by a few character locations:
My users make an initial manual selection that I store to a database.
To get the start/end positions of the initial selection I am using the approach outlined here Caret position in textarea, in characters from the start
(Answered by Tim Down)
I store the selections made by the users, and when they come back to the page I want to default in their previous selections.
My code for making the selection based on the stored positions I extracted using Tim Down's function is the following:
function SelectText(start,end) {
var textArea = document.getElementById("textArea");
var inputRange = textArea.createTextRange();
inputRange.collapse(true);
inputRange.moveStart("character", start);
inputRange.moveEnd("character", end - start);
inputRange.select();
}
It seems like the issue is caused by linebreaks/spaces. Does anyone know how to correctly make selections in IE programatically based on start and end?
I don't know exactly if it will help you but you can try to use RangyInputs js library which was developed by Tim Down and available using the following url: http://code.google.com/p/rangyinputs/
As for me I used Rangy (which is developed by Tim Down too) library for content editable div on one of my projects and it really works well and helped me a lot.
The documentation about supported methods you can find on WiKi page: http://code.google.com/p/rangyinputs/wiki/Documentation
My goal is to create a caret browsing extension in google chrome. I have hit a wall with text selection. I've found that I can select the contents of a div:
range = document.createRange();
referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
I can also select child elements using range.setStart(referenceNode,offest) and range.setEnd(referenceNode,offset) where offset is the number of child nodes to skip/include in the selection.
Unfortunately, I have no idea how to select individual characters within a div. This behavior is, ofcourse, available for textareas and input textfields. I'm hoping for a legit javascript solution that I missed, but a hack-around suggestion using DOM manipulation of one form or another is also acceptable.
It is important that the solution allow for caret-browsing like behavior. For example, given the starting position as an offset from some location, and the ending position as an offset from the same location, display the selection in position on the screen and allow for copying the selection.
Thank you for your time.
Best Regards,
Lotus
I don't know if this is hack or not but it is working.
(I just made that) Try demo: http://derek1906.site50.net/experiment/selection/
You can put a <span></span> around the individual characters that you want to select and then you just select the <span> and Wa-la, you selected the words you want!