Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Editor > get_textArea() bounds

• Andrew

  Posted on May 20, 2011 (permalink)

  I'm trying to enable drag and drop from RadTreeView to RadEditor following the demo, but i also need to be able to insert text in HTML view.  When i call $telerik.getBounds() on the return of editor.get_textArea(), the .x and .y are incorrect, something like 0,1. I am checking prior to this that they are indeed in html mode. This works fine for the alternative in design view and get_contentAreaElement().  Is there a way to get the bounds of the textArea, or just the entire control when in HTML view? ( i dont care if they are over the text box or the entire radEditor).
  
  

  function isMouseOverEditorCodeView(editor, events) { 

  var textFrame= editor.get_textArea();

  var textRect= $telerik.getBounds(textFrame); 

  var mouseX = events.clientX;

  var mouseY = events.clientY;

  if (mouseX < (textRect.x + textRect.width) && mouseX > textRect.x && 

      mouseY < (textRect.y + xtRect.height) && mouseY > textRect.y) { 

  return true; 

  }

  return false; 

  }

   

• Answer Rumen Rumen

  Posted on May 24, 2011 (permalink)

  Hello Andrew,
  
  The textarea element in HTML mode is placed in an IFRAME element, which is another iframe different from the editable iframe element in Design mode. The coordinates of the textarea in the iframe are 0, 0 and for this reason the $telerik.getBounds methods returns these bounds. What you can do is to get the bounds of the iframe in HTML mode using the code below and the editor._getTextIframe() method:
  
  

  <script type="text/javascript">

      function OnClientLoad(editor, args) {

         
  

          editor.add_modeChange(function (sender, args) {

              var mode = editor.get_mode();

   

              if (mode == "2") {

                  setTimeout(function () {

                      var textIframe = editor._getTextIframe();

                      textIframe.style.border = "1px solid red";

                      var textRect = $telerik.getBounds(textIframe);

                      alert("X: " + textRect.x + " Y: " + textRect.y);

                  }, 10);

              }

          });

      }

  </script>

  <div style="width: 100px;height: 100px">das</div>

  <table><tr><td>dasdasdas</td><td><telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">

  </telerik:RadEditor></td></tr></table>

  
  
  
  Greetings,
  Rumen
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

• Andrew

  Posted on May 24, 2011 (permalink)

  thanks, that worked for determining if the cursor is over the control correctly, but i've come across another problem with html view. drop into the editor and pasteHtml works for where the cursor was, but i also need to be able to edit selected text when somethign is dropped. all api-references describing selection seem to only work in design view. Much like what happens in the editor if i select text and hit the "Bold" toolbar button, i need to wrap the selected text with custom tags/attributes. are there anymore methods not in the docs (as in the previous suggestion which worked perfectly) that would help me find the selected text in html view, alter it, and replace it, similar to the bold toolbar button in design view? I will paste the code tryign to find the selected text, although it is copy pasted from the docs, and there is no attempt yet to actually replace or alter the selected text.
  

  
function OnClientNodeDroppingToCode(sender, args) {

         var editor = $find("<%=RadEditor.ClientID%>");

         var event = args.get_domEvent();

         var currentMode = editor.get_mode();

         document.body.style.cursor = "default";

         var result =false;

         if (currentMode == 2)

         {

             result = isMouseOverEditorCodeView(editor, event);

         }

         if (result) {

             

           

                var selection = editor.getSelection();

                //get the selected text:

                var selectedText = selection.getText();

                //get the selected HTML:

                var selectedHTML = selection.getHtml();

                //get the currently selected HTML element

                var selElement = selection.GetHtmlText()

                alert("The selected text is: " + selectedText + ".\nThe selected HTML is: " + selectedHTML + ".\nThe selected HTML element is " + selElement.value + ".");

                // editor.pasteHtml(imageSrc);

              

         }

         setOverlayVisible(false);

     }

• Answer Rumen Rumen

  Posted on May 25, 2011 (permalink)

  Hi Andrew,
  
  RadEditor is an HTML WYSIWYG editor and all API is implemented and provided for Design mode only where the content area is editable IFRAME element. As you know the content area in HTML mode is a textarea but not an editable iframe and the built-in browser commands do not work for it.
  
  If you want to manipulate the string content in the HTML mode, you should get a reference to the textarea (editor.get_textArea()) and using text range object of the browser to edit it. The range object is specific for each browser, and its API will differ greatly, so from this point on you will need to write browser-specific code.
  
  You can also see the following articles which provide useful information about caret position, moving and locating the carer position:
  Mouse Cursor Position
  How to set/get caret position of a textfield in IE?
  Working with the Cursor Position.
  http://www.quirksmode.org/dom/range_intro.html
  and
  http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
  
  Best regards,
  Rumen
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Editor > get_textArea() bounds