警报来自CKEDITOR中文本区域的选择

Question

i am trying to alert the selection that i choose from the textarea in CKEDITOR. when i run, just "No text is selected." comes out. i want to see the alert "The current selection is: "+ selection. i think i need to change here var textarea = document.getElementById('editor1'); could anyone help me with the problem??

setup:

function () 
{
    var selection = "";
    var textarea = document.getElementById('editor1');
    if ('selectionStart' in textarea)
    {
         // check whether some text is selected in the textarea
         if (textarea.selectionStart != textarea.selectionEnd)
         {
           selection = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
         }
    }
    else
    {
        // Internet Explorer before version 9
       // create a range from the current selection
       var textRange = document.selection.createRange();
        // check whether the selection is within the textarea
      var rangeParent = textRange.parentElement();
      if (rangeParent === textarea)
      {
          selection = textRange.text;
      }
    }
    if (selection == "")
    {
       alert("No text is selected.");
    }
    else
    {      
       alert("The current selection is: " + selection);
    }
   }

Answer 1

To obtain the selection use the following code:

CKEDITOR.instances.youEditorInstance.getSelection().getSelectedText();

This method however returns text only (no HTML markup).

---

To save HTML markup, you can try something like this:

var range = CKEDITOR.instances.editor1.getSelection().getRanges()[ 0 ];
var rangeClone = range.clone();

range.collapse();
var el1 = range.getCommonAncestor( true, true );
range.splitElement( el1 );

rangeClone.collapse( true ); // to beginning
var el2 = rangeClone.getCommonAncestor( true, true );
rangeClone.splitElement( el2 );

var html = '';
var newRange = CKEDITOR.instances.editor1.getSelection().getRanges()[ 0 ];
var children = newRange.cloneContents().getChildren();

var element;
for( var i = 0 ; i < children.count() ; i++ ) {
    element = children.getItem( i );
    html += element.$.innerHTML ? element.getOuterHtml() : '';
}

html will store your selection HTML.