Support forums - Problems with editor.GetSelection() in IE

Support forums » Products » Cute Editor for PHP » Re: Problems with editor.GetSelection() in IE

Problems with editor.GetSelection() in IE

Last post 05-21-2008, 2:58 PM by postmormon. 9 replies.


	Sort Posts: Previous Next

02-24-2008, 11:43 AM 37318

bix
Joined on 12-29-2007
Posts 33

Problems with editor.GetSelection() in IE

Reply Quote

Hi!

I'm makin my own insert link popup.

I'm havin problems with editor.GetSelection() in IE7, i get an [object] return.

Firefox gives me the correct selected text.

my code:

function button_click()
{
  var editor=Window_GetDialogArguments(window);
  var sel = editor.GetSelection();
  var href=document.getElementById("href");   //listbox with internal pages, returns an URL
  var completeURL="<a href=\"" + href.value + "\">" + sel + "</a>";
  editor.PasteHTML(completeURL);
}

Any ideas?

Thanks!

02-25-2008, 11:04 AM 37331 in reply to 37318

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Problems with editor.GetSelection() in IE

Reply Quote

bix,

The selection is an object. Your code is not correct. I think what you want is getting the HTML code from the current selection.

Please use the following code:

function getSelectedHTML(){
var rng=null,html="";

      if (document.selection && document.selection.createRange){
        rng=editdoc.selection.createRange();
        html=rng.htmlText||"";
      }else if (window.getSelection){
        rng=editwin.getSelection();

        if (rng.rangeCount > 0 && window.XMLSerializer){
          rng=rng.getRangeAt(0);
          html=new XMLSerializer().serializeToString(rng.cloneContents());
        }
      }
      return html;
    }

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

05-18-2008, 7:15 PM 40504 in reply to 37331

postmormon
Joined on 04-27-2008
Posts 5

Re: Problems with editor.GetSelection() in IE

Reply Quote

When I use the code you recommend then I get an error win IE that says editdoc is undefined. Why?

05-20-2008, 10:22 AM 40574 in reply to 40504

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Problems with editor.GetSelection() in IE

Reply Quote

You need to get editdoc object first.

Getting the CuteEditor Instance

In order to find the active editor, you would type:

// get the cute editor instance

var editor1 = document.getElementById('CE_Editor1_ID');

Getting the Active Editor Window

In order to find the active editor window, you would type:

// get the active editor window

var editwin = editor1.GetWindow();

Getting the Active Editor Document

In order to find the active editor document, you would type:

// get the active editor document

var editdoc = editor1.GetDocument();

http://phphtmledit.com/document/scr/JavaScript-API.htm

05-20-2008, 4:01 PM 40585 in reply to 40574

postmormon
Joined on 04-27-2008
Posts 5

Re: Problems with editor.GetSelection() in IE

Reply Quote

Man, I've been fighting for three days to get the getSelectedHTML() function to work for me!! I'm aware of the need to create the above variables before calling the function, but I still can't make it work for me.

In the past I've successfully installed a number of wysiwyg editors (wysiwygPro, TinyMCE, etc.) and set up custom buttons so I can select text, modify it, and insert the modified text back into the editor window, but I can't seem to do it with CuteEditor. It would sure be helpful if there was a complete example like this from your documentation, but that showed in similar detail how to set up a custom button that will select text. The snippets of code you provide here and there are insufficient. Why isn't there a complete example in the documentation?? Selecting text is pretty fundamental to any similar kind of editor.

I'm aware of this piece of code, but how is it used? I thought I understood how, but try as I might, it's not working:

function getSelectedHTML(){
var rng=null,html="";

        if (rng.rangeCount > 0 && window.XMLSerializer){
          rng=rng.getRangeAt(0);
          html=new XMLSerializer().serializeToString(rng.cloneContents());
        }
      }
      return html;
    }

05-20-2008, 4:05 PM 40586 in reply to 40585

postmormon
Joined on 04-27-2008
Posts 5

Re: Problems with editor.GetSelection() in IE

Reply Quote

Here's a copy of the code I meant the link to in my previous post to show. It would be helpful if there was a similar example in your documentation, as below, that showed how to set up a custom button that selects text:

Example:

<?php

$editor=new CuteEditor();

$editor->ID="Editor1";

$editor->Text="Type here..";
$editor->FilesPath="CuteEditor_Files";

$editor->TemplateItemList="G_start,Bold,Italic,Underline,Separator,JustifyLeft,JustifyCenter,JustifyRight,G_end";

$editor->CustomAddons = "<img title=\"Using oncommand\" class=\"CuteEditorButton\" onmouseover=\"CuteEditor_ButtonCommandOver(this)\" onmouseout=\"CuteEditor_ButtonCommandOut(this)\" onmousedown=\"CuteEditor_ButtonCommandDown(this)\" onmouseup=\"CuteEditor_ButtonCommandUp(this)\" ondragstart=\"CuteEditor_CancelEvent()\" Command=\"MyCmd\" src=\"CuteEditor_Files/Images/contact.gif\" />";

$editor->Draw();

$ClientID=$editor->ClientID();

$editor=null;

//use $_POST["Editor1"]to catch the data

<br />

var editor1=document.getElementById("<?php echo $ClientID;?>");

function CuteEditor_OnCommand(editor,command,ui,value)

{

//handle the command by yourself

if(command=="MyCmd")

{

// editor.ExecCommand("InsertTable");

editor1.PasteHTML("Hello World");

return true;

}

</script>

05-20-2008, 10:48 PM 40598 in reply to 40586

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Problems with editor.GetSelection() in IE

Reply Quote

<?php

$editor=new CuteEditor();
$editor->ID="Editor1";
$editor->Text="Type here..";
$editor->FilesPath="CuteEditor_Files";
$editor->TemplateItemList="G_start,Bold,Italic,Underline,Separator,JustifyLeft,JustifyCenter,JustifyRight,G_end";
$editor->CustomAddons = "<img title=\"Using oncommand\" class=\"CuteEditorButton\" onmouseover=\"CuteEditor_ButtonCommandOver(this)\" onmouseout=\"CuteEditor_ButtonCommandOut(this)\" onmousedown=\"CuteEditor_ButtonCommandDown(this)\" onmouseup=\"CuteEditor_ButtonCommandUp(this)\" ondragstart=\"CuteEditor_CancelEvent()\" Command=\"MyCmd\" src=\"CuteEditor_Files/Images/contact.gif\" />";
$editor->Draw();

$ClientID=$editor->ClientID();
$editor=null;

function CuteEditor_OnCommand(editor,command,ui,value)
{
   // get the cute editor instance
   var editor1 = document.getElementById('CE_Editor1_ID');

   // get the active editor document
   var editdoc = editor1.GetDocument();

   //handle the command by yourself
   if(command=="MyCmd")
   {

      alert(getSelectedHTML());
      editor1.PasteHTML("Hello World"+ getSelectedHTML());
      return true;
   }

   function getSelectedHTML(){
      var rng=null,html="";
      if (document.selection && document.selection.createRange){
        rng=editdoc.selection.createRange();
        html=rng.htmlText||"";
      }else if (window.getSelection){
        rng=editwin.getSelection();

        if (rng.rangeCount > 0 && window.XMLSerializer){
          rng=rng.getRangeAt(0);
          html=new XMLSerializer().serializeToString(rng.cloneContents());
        }
      }
      return html;
    }
}
</script>

05-21-2008, 10:41 AM 40633 in reply to 40598

postmormon
Joined on 04-27-2008
Posts 5

Re: Problems with editor.GetSelection() in IE

Reply Quote

Thanks for the response, Adam, but your code doesn't work in Firefox. It works in IE 7 though. I've not tested it in anything else yet. Below is a link to the page where I'm running your code, and below that is the exact code I'm using:

http://www.postmormon.org/CuteEditor/custom_select_button.php

<?php include_once("CuteEditor_Files/include_CuteEditor.php") ; ?><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<form>
<?php

$editor=new CuteEditor();
$editor->ID="Editor1";
$editor->Text="Type here..";
$editor->FilesPath="CuteEditor_Files";
$editor->TemplateItemList="G_start,Bold,Italic,Underline,Separator,JustifyLeft,JustifyCenter,JustifyRight,G_end";
$editor->CustomAddons = "<img title=\"Using oncommand\" class=\"CuteEditorButton\" onmouseover=\"CuteEditor_ButtonCommandOver(this)\" onmouseout=\"CuteEditor_ButtonCommandOut(this)\" onmousedown=\"CuteEditor_ButtonCommandDown(this)\" onmouseup=\"CuteEditor_ButtonCommandUp(this)\" ondragstart=\"CuteEditor_CancelEvent()\" Command=\"MyCmd\" src=\"CuteEditor_Files/Images/contact.gif\" />";
$editor->Draw();

$ClientID=$editor->ClientID();
$editor=null;

?>

<br />
<input type="submit" value="Submit" ID="Submit1" NAME="Submit1" /><br />
</form>

<script language="JavaScript" type="text/javascript" >
function CuteEditor_OnCommand(editor,command,ui,value)
{
   // get the cute editor instance
   var editor1 = document.getElementById('CE_Editor1_ID');

   // get the active editor document
   var editdoc = editor1.GetDocument();

   //handle the command by yourself
   if(command=="MyCmd")
   {
      alert(getSelectedHTML());
      editor1.PasteHTML("Hello World"+ getSelectedHTML());
      return true;
   }

   function getSelectedHTML(){
      var rng=null,html="";
      if (document.selection && document.selection.createRange){
        rng=editdoc.selection.createRange();
        html=rng.htmlText||"";
      }else if (window.getSelection){
        rng=editwin.getSelection();
        if (rng.rangeCount > 0 && window.XMLSerializer){
          rng=rng.getRangeAt(0);
          html=new XMLSerializer().serializeToString(rng.cloneContents());
        }
      }
      return html;
    }
}
</script>

</body>
</html>

05-21-2008, 1:38 PM 40642 in reply to 40598

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Problems with editor.GetSelection() in IE

Reply Quote

// get the active editor window
var editwin = editor1.GetWindow();

Add the above code before

function getSelectedHTML(){

}

05-21-2008, 2:58 PM 40646 in reply to 40633

postmormon
Joined on 04-27-2008
Posts 5

Re: Problems with editor.GetSelection() in IE

Reply Quote

Thank you, Adam, now it's working. You left that line of code out of your example in a previous post. You might want to correct it, in case someone else comes across the post.