Select text in textarea programatically in IE 8 - javascript

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

Related

Creating a tooltip on word(s) in a text editor (Google Docs) using JavaScript/CSS

Intro:
I'm working with Google Docs and have been trying (and struggling) to create a tooltip that pops up on selected (highlighted with cursor) words after the click of a button, for the purpose of creating notes for studying.
For example, if I have the words "Dynamic Programming" and I want to add the definition of it to the instances of "Dynamic Programming" so that when I hover/click on it, the definition will appear and I won't have to constantly scroll around or CTRL+F for it.
My question is if there is any advice on how to attach a tooltip to the selected text. I'm thinking of maybe creating a class="tooltip" and altering the inner HTML to include this class using xpath selection, but I'm struggling to put this idea into place. Are there any suggestions for how to approach this issue?
I've tried altering the selected text using the Document.ExecCommand(), like bolding it but there are no results. I see that this command is deprecated but I'm not sure what else I can use in its place. I wanted to use it's insertHTML().
My code so far:
I'm currently able to get the user's text selection (to attach the tooltip to), although it doesn't work entirely as planned. Even if you select only one word, it returns the entire line.
function createPopup(text) {
var text = [];
var selection = DocumentApp.getActiveDocument().getSelection().getSelectedElements();
if (selection) {
for (var i = 0; i < selection.length; i++) {
text.push(selection[i].getElement().asText().getText());
}
DocumentApp.getUi().alert(text);
}
}
Answer:
Unfortunately, this is not possible.
More Information:
The tool-tip-like pop-ups that show for hyperlinks such as this one are not customisable and not a feature that is currently in Google Sheets.
Workaround:
You can use comments on cells which act similarly to these tooltips: hovering over the cell will reveal the comment like so:
Feature Request:
Alternatively, if you would like something more customaible than cell comments, I would suggest filing a feature request to Google with the details.
You can do this from the Google Sheets UI, by following the Help > Help Sheets improve menu item.
There is also a feature request here which details being able to add and manipulate comments directly from Google Apps Script, so add a star to the issue to help its visibility.

How to select multiple elements in RadEditor in ie11

I am working on an application based on ASP.NET, running in IE11.
One part of the application makes use of (Telerik) RadEditor to create a layout of several items. I am trying to implement a feature that allows a user to select multiple elements and then align them either vertically or horizontally. I've been told that this feature used to work sometime in the past, but stopped working when IE upgraded either from 9 to 10, or 10 to 11.
I can select (selection border shows up on all selected elements) multiple elements in the page (in the (Telerik) RadEditor content space) by holding control+clicking. My problem is that the editor can't find all the selected elements, but rather returns the first one.
Relevant (Javascript) code is:
var editor = $find("RadEditor1");
var theSelectionObject = editor.getSelection();
var tempElem = editor.getSelectedElement();
Both theSelectionObject and tempElem are references to a single object. How can I get a collection of ALL selected elements or otherwise determine which elements are selected to use in later code?
The IE version of the browser's execCommand method offers a MultipleSelection option which allows for the selection of more than one site selectable element at a time when the user holds down the SHIFT or CTRL keys. You can find more info at https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/hh801232(v%3dvs.85)#multipleselection
To fire this method via the RadEditor API do:
editor.get_document().execCommand('MultipleSelection', true, true);

Getting start and end of selected text from tinyMCE

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

javascript: create range from cursor position at time a to cursor position at time b

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

Div Inner Text Selection using Javascript (with keyboard?)

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!

Categories