[webdriver]-Selecting range of text in tinyMCE html editor

1,201 views
Skip to first unread message

Nilesh

unread,
Dec 14, 2010, 12:22:07 PM12/14/10
to webdriver
Hi All,
My application has TinyMCE HTML editor and I am trying to select a
range of text inside that editor. I have a javascript code that
selects a range of text but it is only working for textArea/input
objects and not for tinyMCE editor. I am using 2.0a4, FF3.6 on Windows
XP. Here is my code and reduced HTML.

Anything I am missing?
Thanks,
-Nilesh

//Working code for textArea/input objects
JavascriptExecutor js = (JavascriptExecutor)driver;
String jsScript=
"arguments[0].focus();arguments[0].setSelectionRange(0,6);";
js.executeScript(jsScript,element); //This works for textArea/input
objects

//Code not working
JavascriptExecutor js = (JavascriptExecutor)driver;
String jsScript=
"arguments[0].focus();arguments[0].setSelectionRange(0,6);";
driver.switchTo().frame("myFrame");
WebElement txtArea = driver.findElement(By.id("tinymce"));
txtArea.sendKeys("hello world http://my.site.com"); //until here it
works
js.executeScript(jsScript,txtArea); //This one fails
//Exception
org.openqa.selenium.WebDriverException: TypeError:
arguments[0].setSelectionRange is not a function
System info: os.name: 'Windows XP', os.arch: 'x86', os.version: '5.1',
java.version: '1.6.0_19'
Driver info: driver.version: remote

//Reduced HTML
<iframe style="width: 100%; height: 184px;" src='javascript:""'
id="myFrame" frameborder="0"></iframe></td></tr></tbody>
<html>
<head xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="X-UA-
Compatible" content="IE=7">
<........>
<body class="mceContentBody " id="tinymce" dir="ltr">
<p>hello world<br _mce_bogus="1"></p></body>
</body>
</html>
<iframe>

Nilesh

unread,
Dec 14, 2010, 7:21:22 PM12/14/10
to webdriver
I found an example of the editor that is available here
http://tinymce.moxiecode.com/examples/full.php

WebDriver driver = new FirefoxDriver();
driver.get("http://tinymce.moxiecode.com/examples/full.php");
JavascriptExecutor js = (JavascriptExecutor)driver;
driver.switchTo().frame("content_ifr");
WebElement tiny = driver.findElement(By.id("tinymce"));
WebElement p = tiny.findElement(By.tagName("p"));
System.out.println(p.getText());
js.executeScript("arguments[0].focus();arguments[0].setSelectionRange(0,10);",tiny);
Thread.sleep(5000);

Throws exception! I am stumped. Anybody?


On Dec 14, 12:22 pm, Nilesh <nilesh.c...@gmail.com> wrote:
> Hi All,
> My application has TinyMCE HTML editor and I am trying to select a
> range of text inside that editor. I have a javascript code that
> selects a range of text but it is only working for textArea/input
> objects and not for tinyMCE editor. I am using 2.0a4, FF3.6 on Windows
> XP. Here is my code and reduced HTML.
>
> Anything I am missing?
> Thanks,
> -Nilesh
>
> //Working code for textArea/input objects
> JavascriptExecutor js = (JavascriptExecutor)driver;
> String jsScript=
> "arguments[0].focus();arguments[0].setSelectionRange(0,6);";
> js.executeScript(jsScript,element); //This works for textArea/input
> objects
>
> //Code not working
> JavascriptExecutor js = (JavascriptExecutor)driver;
> String jsScript=
> "arguments[0].focus();arguments[0].setSelectionRange(0,6);";
> driver.switchTo().frame("myFrame");
> WebElement txtArea = driver.findElement(By.id("tinymce"));
> txtArea.sendKeys("hello worldhttp://my.site.com");     //until here it

Nilesh

unread,
Jan 20, 2011, 11:39:10 AM1/20/11
to webdriver
I was able to select a range of text in tinyMCE editor for both
firefox and IE using DOM Range. Conceptually range objects are quite
different in IE and firefox. Thought I would share the code just in
case if anyone stumbles on the same problem.

startindex and endindex are the starting position and end character
position respectively.

String script =
" if(window.getSelection)"+ //firefox
"{"+
"var range = document.createRange();"+
"var start = arguments[0].firstChild;"+
"range.setStart(start, "+startindex+");"+
"range.setEnd(start, "+endindex+");"+
"window.getSelection().addRange(range);"+
"}"+
"if(document.selection)"+ //IE
"{"+
"document.selection.empty();"+
"var txtRange = document.body.createTextRange();"+
"var start = arguments[0];"+
"txtRange.moveToElementText(start);"+
"txtRange.setEndPoint(\"EndToEnd\", txtRange);"+
"txtRange.moveStart('character',"+startindex+");"+
"txtRange.moveEnd('character',"+endindex+");"+ //endindex is negative
for selected text
"txtRange.select();"+
"}";

js.executeScript(script, objArea); //objArea is tinyMCE editor object

If you want to select all in firefox then the script would slightly
change but I did not want to post convoluted code here to add to
confusion.
var start= arguments[0];
Object obj=(Object) js.executeScript("return
arguments[0].childNodes.length;", txtArea);
endindex = Integer.parseInt(obj.toString());

Hope that helps!

-Nilesh



On Dec 14 2010, 7:21 pm, Nilesh <nilesh.c...@gmail.com> wrote:
> I found an example of the editor that is available herehttp://tinymce.moxiecode.com/examples/full.php
>
> WebDriver driver = new FirefoxDriver();
> driver.get("http://tinymce.moxiecode.com/examples/full.php");
> JavascriptExecutor js = (JavascriptExecutor)driver;
> driver.switchTo().frame("content_ifr");
> WebElement tiny = driver.findElement(By.id("tinymce"));
> WebElement p = tiny.findElement(By.tagName("p"));
> System.out.println(p.getText());
> js.executeScript("arguments[0].focus();arguments[0].setSelectionRange(0,10) ;",tiny);
> Thread.sleep(5000);
>
> Throws exception! I am stumped. Anybody?
>
> On Dec 14, 12:22 pm, Nilesh <nilesh.c...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hi All,
> > My application hasTinyMCEHTML editor and I am trying to select a
> > range of text inside that editor. I have a javascript code that
> > selects a range of text but it is only working for textArea/input
> > objects and not fortinyMCEeditor. I am using 2.0a4, FF3.6 on Windows
Reply all
Reply to author
Forward
0 new messages