How to get reference of dom element where cursor is placed

How ro get reference of dom element where cursor is currently positioned. I need to use reference of dom element to add style attributes to it.

Suppose current curser position is after 'Rah' in ckeditor.

<div><span>Rahul</span></div>

How can I get reference of span element surrounding "Rah".

Thanks.

Wed, 12/15/2010 - 17:46

luke23ae

Joined: 27/11/2009

Posts: 66

Re: How to get reference of dom element where cursor is plac

Try

your_editor.getSelection().getStartElement();

where your_editor probably is "this" if you use that code from within CKEditor.

Thu, 12/16/2010 - 09:39

rahul_sharma

Joined: 25/11/2010

Posts: 6

Re: How to get reference of dom element where cursor is plac

Thanks a lot. Worked fine in all browsers except IE.
In Internet Explorer (IE8) when there is no selection(only cursur is placed in CKEditor).

var selection = your_editor.getSelection();

selection object returned is null.

I also tried editing CKEditor samples distributed and faced same problem in api.html sample too.

Modified api.html sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>API usage - CKEditor Sample</title>
   <meta content="text/html; charset=utf-8" http-equiv="content-type" />
   <script type="text/javascript" src="../ckeditor.js"></script>
   <script src="sample.js" type="text/javascript"></script>
   <link href="sample.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript">
   //<![CDATA[

// The instanceReady event is fired when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
   // Show the editor name and description in the browser status bar.
   document.getElementById( 'eMessage' ).innerHTML = '<p>Instance "' + ev.editor.name + '" loaded.<\/p>';

   // Show this sample buttons.
   document.getElementById( 'eButtons' ).style.visibility = '';
});

function InsertHTML()
{
   // Get the editor instance that we want to interact with.
   var oEditor = CKEDITOR.instances.editor1;
   [b][size=150]alert(oEditor.getSelection()); //null is returned in IE[/size][size=150][/size][/b]
}


   //]]>
   </script>

</head>
<body>
   <h1>
      CKEditor Sample
   </h1>
   <!-- This <div> holds alert messages to be display in the sample page. -->
   <div id="alerts">
      <noscript>
         <p>
            <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
            support, like yours, you should still see the contents (HTML data) and you should
            be able to edit it normally, without a rich editor interface.
         </p>
      </noscript>
   </div>
   <form action="sample_posteddata.php" method="post">
      <p>
         This sample shows how to use the CKeditor JavaScript API to interact with the editor
         at runtime.</p>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

      <script type="text/javascript">
      //<![CDATA[
         // Replace the <textarea id="editor1"> with an CKEditor instance.
         var editor = CKEDITOR.replace( 'editor1' );
      //]]>
      </script>

      <div id="eMessage">
      </div>
      <div id="eButtons" style="visibility: hidden">
         <input onclick="InsertHTML();" type="button" value="Insert HTML" />
         
      </div>
   </form>
   <div id="footer">
</body>
</html>

IE is behaving differently. Is this a known issue.
Any other way to get reference of dom element where cursor is placed in IE?

Fri, 12/17/2010 - 10:22

rahul_sharma

Joined: 25/11/2010

Posts: 6

Re: How to get reference of dom element where cursor is plac

In IE

editor.selection()

is returned as null when there is no selection and cursor position is on text element(Span in my case).

Sample demonstrating this IE bug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>API usage - CKEditor Sample</title>
   <meta content="text/html; charset=utf-8" http-equiv="content-type" />
   <script type="text/javascript" src="../ckeditor.js"></script>
   <script src="sample.js" type="text/javascript"></script>
   <link href="sample.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript">
   //<![CDATA[

// The instanceReady event is fired when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
   // Show the editor name and description in the browser status bar.
   document.getElementById( 'eMessage' ).innerHTML = '<p>Instance "' + ev.editor.name + '" loaded.<\/p>';

   // Show this sample buttons.
   document.getElementById( 'eButtons' ).style.visibility = '';
});

function InsertHTML()
{
   // Get the editor instance that we want to interact with.
   var oEditor = CKEDITOR.instances.editor1;
    alert(oEditor.getSelection()); //null is returned in IE
}


   //]]>
   </script>

</head>
<body>
   <h1>
      CKEditor Sample
   </h1>
   <!-- This <div> holds alert messages to be display in the sample page. -->
   <div id="alerts">
      <noscript>
         <p>
            <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
            support, like yours, you should still see the contents (HTML data) and you should
            be able to edit it normally, without a rich editor interface.
         </p>
      </noscript>
   </div>
   <form action="sample_posteddata.php" method="post">
      <p>
         This sample shows how to use the CKeditor JavaScript API to interact with the editor
         at runtime.</p>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

      <script type="text/javascript">
      //<![CDATA[
         // Replace the <textarea id="editor1"> with an CKEditor instance.
         var editor = CKEDITOR.replace( 'editor1' );
      //]]>
      </script>

      <div id="eMessage">
      </div>
      <div id="eButtons" style="visibility: hidden">
         <input onclick="InsertHTML();" type="button" value="Insert HTML" />
         
      </div>
   </form>
   <div id="footer">
</body>
</html>

I hope there is a possible workaround.

Thanks

Mon, 11/14/2011 - 15:14

johnmartirano

Joined: 14/11/2011

Posts: 4

Re: How to get reference of dom element where cursor is plac

Was this bug ever resolved? Or a workaround found?