9

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 :(

Gabriel Falcão
  • 1,075
  • 1
  • 13
  • 9
  • I've already tried the selectElement, but with no success – Gabriel Falcão Dec 09 '10 at 18:37
  • getElementsByTag return a collection of elements. Check carefully what are the objects that you are using, their methods and properties and if there are any errors. You can use the CKEditor source files to debug the calls when it isn't clear what some method does or why it does fail. – AlfonsoML Dec 10 '10 at 18:24

4 Answers4

13

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]]);
}
Siva
  • 543
  • 4
  • 6
  • 4
    I tried this and it is working fine when selecting content inside a single tag like `p` or `span`. However, if you select anywhere after any tag it will throw an error - `Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 364 is larger than or equal to the node's length (37).` Please see this html sample - http://pastebin.com/CkTBewqb – ninjascorner Jul 22 '14 at 15:15
6

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);
rzk
  • 150
  • 6
Jajo
  • 123
  • 1
  • 5
2

Check out the selectElement() method of CKEDITOR.dom.selection.

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

simshaun
  • 21,263
  • 1
  • 57
  • 73
0

insert text at cursor point in ck editor

  • function insertVar(myValue) { CKEDITOR.instances['editor1'].fire( 'insertText',myValue); }

    this is working for me

Nidhi
  • 29
  • 1