ab{c}de
- * - * The following HTML will be returned: - * - * c - * - * As you can see, the information about the bold has been preserved, even though the selection was - * anchored inside the `` element. - * - * See also: - * - * * the {@link #extractSelectedHtml} method, - * * the {@link #getHtmlFromRange} method. - * - * @since 4.5 - * @param {Boolean} [toString] If `true`, then a stringified HTML will be returned. - * @returns {CKEDITOR.dom.documentFragment/String} - */ - getSelectedHtml: function( toString ) { - var docFragment = this.getHtmlFromRange( this.editor.getSelection().getRanges()[ 0 ] ); - - return toString ? docFragment.getHtml() : docFragment; - }, - - /** - * Gets the selected HTML (it is returned as a {@link CKEDITOR.dom.documentFragment document fragment} - * or a string) and removes the selected part of the DOM. This method is designed to work as user would - * expect the cut and delete functionalities to work. - * - * See also: - * - * * the {@link #getSelectedHtml} method, - * * the {@link #extractHtmlFromRange} method. - * - * @since 4.5 - * @param {Boolean} [toString] If `true`, then a stringified HTML will be returned. - * @returns {CKEDITOR.dom.documentFragment/String} - */ - extractSelectedHtml: function( toString ) { - var range = this.editor.getSelection().getRanges()[ 0 ], - docFragment = this.extractHtmlFromRange( range ); - - this.editor.getSelection().selectRanges( [ range ] ); - - return toString ? docFragment.getHtml() : docFragment; - }, - - /** - * A base of the {@link #getSelectedHtml} method. + * A base of the {@link CKEDITOR.editor#getSelectedHtml} method. * * @since 4.5 * @method getHtmlFromRange @@ -705,7 +653,7 @@ }, /** - * A base of the {@link #extractSelectedHtml} method. + * A base of the {@link CKEDITOR.editor#extractSelectedHtml} method. * * **Note:** The range is modified so it matches desired selection after extraction. * But the selection is not made. diff --git a/core/editor.js b/core/editor.js index 39599ad990d..1bf5fdf39ca 100644 --- a/core/editor.js +++ b/core/editor.js @@ -1085,6 +1085,70 @@ this.fire( 'insertElement', element ); }, + /** + * Gets the selected HTML (it is returned as a {@link CKEDITOR.dom.documentFragment document fragment} + * or a string). This method is designed to work as a user would expect the copy functionality to work. + * For instance, if the following selection has been made: + * + *ab{c}de
+ * + * The following HTML will be returned: + * + * c + * + * As you can see, the information about the bold has been preserved, even though the selection was + * anchored inside the `` element. + * + * See also: + * + * * the {@link #extractSelectedHtml} method, + * * the {@link CKEDITOR.editable#getHtmlFromRange} method. + * + * @since 4.5 + * @param {Boolean} [toString] If `true`, then a stringified HTML will be returned. + * @returns {CKEDITOR.dom.documentFragment/String} + */ + getSelectedHtml: function( toString ) { + var editable = this.editable(); + + if ( !editable ) { + return null; + } + + var docFragment = editable.getHtmlFromRange( this.getSelection().getRanges()[ 0 ] ); + + return toString ? docFragment.getHtml() : docFragment; + }, + + /** + * Gets the selected HTML (it is returned as a {@link CKEDITOR.dom.documentFragment document fragment} + * or a string) and removes the selected part of the DOM. This method is designed to work as user would + * expect the cut and delete functionalities to work. + * + * See also: + * + * * the {@link #getSelectedHtml} method, + * * the {@link CKEDITOR.editable#extractHtmlFromRange} method. + * + * @since 4.5 + * @param {Boolean} [toString] If `true`, then a stringified HTML will be returned. + * @returns {CKEDITOR.dom.documentFragment/String} + */ + extractSelectedHtml: function( toString ) { + var editable = this.editable(); + + if ( !editable ) { + return null; + } + + var range = this.getSelection().getRanges()[ 0 ], + docFragment = editable.extractHtmlFromRange( range ); + + this.getSelection().selectRanges( [ range ] ); + + return toString ? docFragment.getHtml() : docFragment; + }, + /** * Moves the selection focus to the editing area space in the editor. */ diff --git a/core/selection.js b/core/selection.js index 34797ff9427..ca25310338a 100644 --- a/core/selection.js +++ b/core/selection.js @@ -1597,37 +1597,6 @@ return ( cache.selectedText = text ); }, - /** - * Retrieves the HTML contained within the range. If selection - * contains multiple ranges method will return concatenation of HTMLs from ranges. - * - * var text = editor.getSelection().getSelectedText(); - * alert( text ); - * - * @since 4.4 - * @returns {String} A string of HTML within the current selection. - */ - getSelectedHtml: function() { - var nativeSel = this.getNative(); - - if ( this.isFake ) { - return this.getSelectedElement().getHtml(); - } - - if ( nativeSel && nativeSel.createRange ) - return nativeSel.createRange().htmlText; - - if ( nativeSel.rangeCount > 0 ) { - var div = document.createElement( 'div' ); - - for ( var i = 0; i < nativeSel.rangeCount; i++ ) { - div.appendChild( nativeSel.getRangeAt( i ).cloneContents() ); - } - return div.innerHTML; - } - return ''; - }, - /** * Locks the selection made in the editor in order to make it possible to * manipulate it without browser interference. A locked selection is diff --git a/tests/core/editable/getextractselectedhtml.html b/tests/core/editable/getextracthtmlfromrange.html similarity index 100% rename from tests/core/editable/getextractselectedhtml.html rename to tests/core/editable/getextracthtmlfromrange.html diff --git a/tests/core/editable/getextractselectedhtml.js b/tests/core/editable/getextracthtmlfromrange.js similarity index 90% rename from tests/core/editable/getextractselectedhtml.js rename to tests/core/editable/getextracthtmlfromrange.js index 8bf258b0eaf..d83456b0b96 100644 --- a/tests/core/editable/getextractselectedhtml.js +++ b/tests/core/editable/getextracthtmlfromrange.js @@ -319,54 +319,6 @@ ] }, 'header' ); - CKEDITOR.tools.extend( tests, { - 'test getSelectedHtml': function() { - var editor = this.editors.inline; - bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); - - var frag = editor.editable().getSelectedHtml(); - - assert.isInstanceOf( CKEDITOR.dom.documentFragment, frag ); - assert.areSame( 'ob', frag.getHtml() ); - }, - - 'test getSelectedHtml with toString option': function() { - var editor = this.editors.inline; - bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); - - assert.areSame( 'ob', editor.editable().getSelectedHtml( true ) ); - }, - - 'test extractSelectedHtml': function() { - var editor = this.editors.inline; - bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); - - // We need to precisely check if selection was set, because - // after the selected part of the DOM is extracted browser would - // make a similar selection in similar place. This way we're distinguishing who made it. - sinon.spy( CKEDITOR.dom.selection.prototype, 'selectRanges' ); - - var frag = editor.editable().extractSelectedHtml(), - selectionWasSetOnce = CKEDITOR.dom.selection.prototype.selectRanges.calledOnce; - - CKEDITOR.dom.selection.prototype.selectRanges.restore(); - - assert.areSame( 'ob', frag.getHtml(), 'extracted HTML' ); - assert.isTrue( selectionWasSetOnce, 'new selection has been set' ); - assert.isInnerHtmlMatching( 'fo^ar@
', bender.tools.selection.getWithHtml( editor ), - { compareSelection: true, normalizeSelection: true }, 'contents of the editor' ); - }, - - 'test extractSelectedHtml with toString option': function() { - var editor = this.editors.inline; - bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); - - assert.areSame( 'ob', editor.editable().extractSelectedHtml( true ) ); - assert.isInnerHtmlMatching( 'fo^ar@
', bender.tools.selection.getWithHtml( editor ), - { compareSelection: true, normalizeSelection: true }, 'contents of the editor' ); - } - } ); - bender.test( tests ); //fo{ob}ar
' ); + + var frag = editor.getSelectedHtml(); + + assert.isInstanceOf( CKEDITOR.dom.documentFragment, frag ); + assert.areSame( 'ob', frag.getHtml() ); + }, + + 'test getSelectedHtml with toString option': function() { + var editor = this.editor; + bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); + + assert.areSame( 'ob', editor.getSelectedHtml( true ) ); + }, + + 'test extractSelectedHtml': function() { + var editor = this.editor; + bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); + + // We need to precisely check if selection was set, because + // after the selected part of the DOM is extracted browser would + // make a similar selection in similar place. This way we're distinguishing who made it. + sinon.spy( CKEDITOR.dom.selection.prototype, 'selectRanges' ); + + var frag = editor.extractSelectedHtml(), + selectionWasSetOnce = CKEDITOR.dom.selection.prototype.selectRanges.calledOnce; + + CKEDITOR.dom.selection.prototype.selectRanges.restore(); + + assert.areSame( 'ob', frag.getHtml(), 'extracted HTML' ); + assert.isTrue( selectionWasSetOnce, 'new selection has been set' ); + assert.isInnerHtmlMatching( 'fo^ar@
', bender.tools.selection.getWithHtml( editor ), + { compareSelection: true, normalizeSelection: true }, 'contents of the editor' ); + }, + + 'test extractSelectedHtml with toString option': function() { + var editor = this.editor; + bender.tools.selection.setWithHtml( editor, 'fo{ob}ar
' ); + + assert.areSame( 'ob', editor.extractSelectedHtml( true ) ); + assert.isInnerHtmlMatching( 'fo^ar@
', bender.tools.selection.getWithHtml( editor ), + { compareSelection: true, normalizeSelection: true }, 'contents of the editor' ); + } +} ); \ No newline at end of file