Develop Reference

Getting already selected text

By using following code I am getting the selected text's startindex and the selected text itself. I am storing them in a local database. I am changing the selected text background color to yellow.
var mainDiv = document.getElementsByTagName("body")[0];
var sel = getSelectionCharOffsetsWithin(mainDiv);
var selectedText = window.getSelection();
location.href = selectedText + '*' + sel.start; // this is to call iOS function.
var range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
span.setAttribute("id", sel.start);
range.surroundContents(span);
Now, I am doing something else, and again I come back to same page. Here now I want to show previously selected text as highlighted.

Use Rangy , nothing beats it , does exactly what your trying
Rangy
Have a look at this demo

How to get Selected Text from DIV

I'm getting the selected text from textarea but I can't get it from a div.
I'm trying with document.getElementById('myDiv') but it doesn't work.
To be more specific. When I have text, using this method I can get the selected text
function TestSelection ()
{
if (window.getSelection) {
var selectionRange = window.getSelection();
alert ("The text content of the selection:\n" + selectionRange.toString());
}
}
but I cant specify the div to get it's selected text. Only from this div, not from another.
I tried var value = document.getElementById("myDiv").innerHTML;
and then value.getSelection but it doesn't work too.
Thank you very much!!!

Simply ,do the following :
var ss=getSelection();
ss.baseNode.data.substring(ss.baseOffset,ss.extentOffset);

Use the innerHTML property
var html = document.getElementById('myDiv').innerHTML;

You should use innerHTML property:
var value = document.getElementById("myDiv").innerHTML;

You should use Selection
var selObj = window.getSelection();
window.alert(selObj);

for jquery
var str = $("#myDiv").text();
str is the text

Find ckeditor instance

I want to access and manipulate the content of a textarea where ckeditor is used. My original code before I started using the editor was:
(function ($) {
"use strict";
$(document).ready(function () {
for(var i=0; i<=10; i++) {
$('#edit-button'+i).click(function(){
var tag = $(this).attr("value");
var id ="edit-body-und-0-value"; /* id of textarea */
var element = document.getElementById(id);
var start = element.selectionStart;
var end = element.selectionEnd;
var text = element.value;
var prefix = text.substring(0, start);
var selected = text.substring(start, end);
var suffix = text.substring(end);
selected = "["+tag+"]" + selected + "[/"+tag+"]";
element.value = prefix + selected + suffix;
element.selectionStart = start;
element.selectionEnd = start + selected.length;
return false;
});
}
});
})(jQuery);
This stops working when the editor is enabled.
I'm guessing that I need to use some different object then the 'element' object, the ckeditor object, and then I could maybe use the function described here: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html
But how do I get the ckeditor object?
The ckeditor is added in drupal so I know very little about it and I am very unsure about how to access it or what information to look for in order to be able to know what to do.
On this page: http://ckeditor.com/blog/CKEditor_for_jQuery
$( 'textarea.editor' ).ckeditor();
is used to create the object(?). But I already have an ckeditor instance that I need to find. Can I some how select the editor for a given textarea?

Using the jquery adapter, you can get the ckeditor "object" like this:
$('textarea.editor').ckeditorGet()
So to destroy it, you'd do
$('textarea.editor').ckeditorGet().destroy()
This is using version 4.x of ckeditor.

How can I get the element in which highlighted text is in?

I am trying to learn how to write a bookmarklet where I can highlight some text, click on the bookmarklet and have it tell me what got highlighted. I can get that far, but next I want to know what element that text is in.
For example:
<div id="some-id">to be highlighted</div>
The bookmarklet code:
javascript:(function(){alert(window.getSelection();})()
If I highlight the text "to be highlighted" and then click on the bookmarklet, it will alert the text. But how can I get the element in which the text is in, in this case the element after that?
So the flow is: highlight text, click bookmarklet, bookmarklet tells you what you highlighted and the element it's in.
Thanks!

Try something similar to this to get the dom element that contains the selected text.
window.getSelection().anchorNode.parentNode
It works on firefox and Chrome, you should test it into the remaining browsers.
It have a quirk, if you select text that beholds to more than an element, only the first one is returned. But maybe you can live with this.
Just for reference on what is the anchorNode property:
http://help.dottoro.com/ljkstboe.php
On internet explorer this snippet should do the trick (I can't test it)
document.selection.createRange().parentElement();
as stated into
http://msdn.microsoft.com/en-us/library/ms535872.aspx and
http://msdn.microsoft.com/en-us/library/ms536654.aspx
A range explanation on quirksmode: http://www.quirksmode.org/dom/range_intro.html

You can do this relatively simply in all major browsers. Code is below, live example: http://jsfiddle.net/timdown/Q9VZT/
function getSelectionTextAndContainerElement() {
var text = "", containerElement = null;
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var node = sel.getRangeAt(0).commonAncestorContainer;
containerElement = node.nodeType == 1 ? node : node.parentNode;
text = sel.toString();
}
} else if (typeof document.selection != "undefined" &&
document.selection.type != "Control") {
var textRange = document.selection.createRange();
containerElement = textRange.parentElement();
text = textRange.text;
}
return {
text: text,
containerElement: containerElement
};
}

I don't think you can, he only way to know which element is currently being used would be to use a onclick event on the element. Other than that there is no sure way. You can however search each element until you find an element with the same text,
jQuery('*:contains(' + selected + ').
You can add an event to get the current element with this code though (untested)
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
all[i].onclick = function(e){
window.selectedElement = all[i];
//preventDefault $ StopBubble &
return false;
}
And it will be stored in selectedElement
Ok try This:
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
all[i].onclick = function(e) {
window.selectedElement = this;
((e && e.stopPropagation && e.stopPropagation()) ||
(window.event && (window.event.cancelBubble = true)));
return false;
}
DEMO: http://jsfiddle.net/HQC6Z/1/
Better yet: http://jsfiddle.net/HQC6Z/
After looking at the other answers, I take back my solution and offer theirs:
How can I get the element in which highlighted text is in?
How can I get the element in which highlighted text is in?

how to select a text range in CKEDITOR programatically?

Problem:
I have a CKEditor instance in my javascript:
var editor = CKEDITOR.instances["id_corpo"];
and I need to insert some text programatically, and select some text range afterwards.
I already did insert text through
editor.insertHtml('<h1 id="myheader">This is a foobar header</h1>');
But I need to select (highlight) the word "foobar", programatically through javascript, so that I can use selenium to work out some functional tests with my CKEditor plugins.
UPDATE 1:
I've also tried something like
var selection = editor.getSelection();
var childs = editor.document.getElementsByTag("p");
selection.selectElement(childs);
But doesn't work at all!
How can I do that?
I think that
selection.selectRange()
could do the job, but I'could not figure out how to use it.
There are no examples over there :(

Get current selection
var editor = CKEDITOR.instances["id_corpo"];
var sel = editor.getSelection();
Change the selection to the current element
var element = sel.getStartElement();
sel.selectElement(element);
Move the range to the text you would like to select
var findString = 'foobar';
var ranges = editor.getSelection().getRanges();
var startIndex = element.getHtml().indexOf(findString);
if (startIndex != -1) {
ranges[0].setStart(element.getFirst(), startIndex);
ranges[0].setEnd(element.getFirst(), startIndex + findString.length);
sel.selectRanges([ranges[0]]);
}

You can also do the following:
get the current selection
var selection = editor.getSelection();
var selectedElement = selection.getSelectedElement();
if nothing is selected then create a new paragraph element
if (!selectedElement)
selectedElement = new CKEDITOR.dom.element('p');
Insert your content into the element
selectedElement.setHtml(someHtml);
If needed, insert your element into the DOM (it will be inserted into the current position)
editor.insertElement(selectedElement);
and then just select it
selection.selectElement(selectedElement);

Check out the selectElement() method of CKEDITOR.dom.selection.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

insert text at cursor point in ck editor
function insertVar(myValue) {
CKEDITOR.instances['editor1'].fire( 'insertText',myValue);
}
this is working for me