->
(br.cke-pasted-remove will be removed later) data = data.replace( /^ (?: |\r\n)?<(\w+)/g, function( match, elementName ) { if ( elementName.toLowerCase() in blockElements ) { evt.data.preSniffing = 'html'; // Mark as not a text. return '<' + elementName; } return match; } ); } else if ( CKEDITOR.env.webkit ) { //
- paragraphs can be separated by new \r\n ).
if ( !data.match( /^([^<]| ([^<]| .
return CKEDITOR.tools.repeat( ' ', ~~( repeats / 2 ) ) + ( repeats % 2 == 1 ? ' ' + data.replace( /( ' + data.replace( /( element completely, because it's a basic structural element,
// so it tries to replace it with an element created based on the active enter mode, eventually doing nothing.
//
// Now you can sleep well.
return filters.plainText || ( filters.plainText = new CKEDITOR.filter( 'br' ) );
} else if ( type == 'semantic-content' ) {
return filters.semanticContent || ( filters.semanticContent = createSemanticContentFilter() );
} else if ( type ) {
// Create filter based on rules (string or object).
return new CKEDITOR.filter( type );
}
return null;
}
};
}
function filterContent( editor, data, filter ) {
var fragment = CKEDITOR.htmlParser.fragment.fromHtml( data ),
writer = new CKEDITOR.htmlParser.basicWriter();
filter.applyTo( fragment, true, false, editor.activeEnterMode );
fragment.writeHtml( writer );
return writer.getHtml();
}
function switchEnterMode( config, data ) {
if ( config.enterMode == CKEDITOR.ENTER_BR ) {
data = data.replace( /(<\/p> )+/g, function( match ) {
return CKEDITOR.tools.repeat( '
.
if ( !data.match( /^([^<]|
at the beginning of last
' : '' );
}
// Replace adjacent white-spaces (EOLs too - Fx sometimes keeps them) with one space.
data = data.replace( /\s+/g, ' ' )
// Remove spaces from between tags.
.replace( /> +<' )
// Normalize XHTML syntax and upper cased
tags.
.replace( /
/gi, '
' );
// IE - lower cased tags.
data = data.replace( /<\/?[A-Z]+>/g, function( match ) {
return match.toLowerCase();
} );
// Don't touch single lines (no
data = data.replace( /^(
|)<\/div>)(?!$|(
|)<\/div>))/g, '
' )
// Two or more - reduce number of new lines by one.
.replace( /^(
|)<\/div>){2}(?!$)/g, '' );
// Two line breaks create one paragraph in Webkit.
if ( data.match( /
|)<\/div>/ ) ) {
data = '
|)<\/div>)+/g, function( match ) {
return repeatParagraphs( match.split( '
' );
// Remove remaining divs.
data = data.replace( /<\/?div>/g, '' );
}
// Opera and Firefox and enterMode != BR.
if ( CKEDITOR.env.gecko && config.enterMode != CKEDITOR.ENTER_BR ) {
// Remove bogus
- Fx generates two
$/, '
' );
// This line satisfy edge case when for Opera we have two line breaks
//data = data.replace( /)
if ( data.indexOf( '
' ) > -1 ) {
// Two line breaks create one paragraph, three - 2, four - 3, etc.
data = '
){2,}/g, function( match ) {
return repeatParagraphs( match.length / 4 );
} ) + '
as disallowed and then tries to remove
// them. However, it cannot remove e.g. a
', match.length / 7 * 2 );
} ).replace( /<\/?p>/g, '' );
} else if ( config.enterMode == CKEDITOR.ENTER_DIV ) {
data = data.replace( /<(\/)?p>/g, '<$1div>' );
}
return data;
}
function preventDefaultSetDropEffectToNone( evt ) {
evt.data.preventDefault();
evt.data.$.dataTransfer.dropEffect = 'none';
}
function initDragDrop( editor ) {
var clipboard = CKEDITOR.plugins.clipboard;
editor.on( 'contentDom', function() {
var editable = editor.editable(),
dropTarget = CKEDITOR.plugins.clipboard.getDropTarget( editor ),
top = editor.ui.space( 'top' ),
bottom = editor.ui.space( 'bottom' );
// -------------- DRAGOVER TOP & BOTTOM --------------
// Not allowing dragging on toolbar and bottom (https://dev.ckeditor.com/ticket/12613).
clipboard.preventDefaultDropOnElement( top );
clipboard.preventDefaultDropOnElement( bottom );
// -------------- DRAGSTART --------------
// Listed on dragstart to mark internal and cross-editor drag & drop
// and save range and selected HTML.
editable.attachListener( dropTarget, 'dragstart', fireDragEvent );
// Make sure to reset data transfer (in case dragend was not called or was canceled).
editable.attachListener( editor, 'dragstart', clipboard.resetDragDataTransfer, clipboard, null, 1 );
// Create a dataTransfer object and save it globally.
editable.attachListener( editor, 'dragstart', function( evt ) {
clipboard.initDragDataTransfer( evt, editor );
}, null, null, 2 );
editable.attachListener( editor, 'dragstart', function() {
// Save drag range globally for cross editor D&D.
var dragRange = clipboard.dragRange = editor.getSelection().getRanges()[ 0 ];
// Store number of children, so we can later tell if any text node was split on drop. (https://dev.ckeditor.com/ticket/13011, https://dev.ckeditor.com/ticket/13447)
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 10 ) {
clipboard.dragStartContainerChildCount = dragRange ? getContainerChildCount( dragRange.startContainer ) : null;
clipboard.dragEndContainerChildCount = dragRange ? getContainerChildCount( dragRange.endContainer ) : null;
}
}, null, null, 100 );
// -------------- DRAGEND --------------
// Clean up on dragend.
editable.attachListener( dropTarget, 'dragend', fireDragEvent );
// Init data transfer if someone wants to use it in dragend.
editable.attachListener( editor, 'dragend', clipboard.initDragDataTransfer, clipboard, null, 1 );
// When drag & drop is done we need to reset dataTransfer so the future
// external drop will be not recognize as internal.
editable.attachListener( editor, 'dragend', clipboard.resetDragDataTransfer, clipboard, null, 100 );
// -------------- DRAGOVER --------------
// We need to call preventDefault on dragover because otherwise if
// we drop image it will overwrite document.
editable.attachListener( dropTarget, 'dragover', function( evt ) {
// Edge requires this handler to have `preventDefault()` regardless of the situation.
if ( CKEDITOR.env.edge ) {
evt.data.preventDefault();
return;
}
var target = evt.data.getTarget();
// Prevent reloading page when dragging image on empty document (https://dev.ckeditor.com/ticket/12619).
if ( target && target.is && target.is( 'html' ) ) {
evt.data.preventDefault();
return;
}
// If we do not prevent default dragover on IE the file path
// will be loaded and we will lose content. On the other hand
// if we prevent it the cursor will not we shown, so we prevent
// dragover only on IE, on versions which support file API and only
// if the event contains files.
if ( CKEDITOR.env.ie &&
CKEDITOR.plugins.clipboard.isFileApiSupported &&
evt.data.$.dataTransfer.types.contains( 'Files' ) ) {
evt.data.preventDefault();
}
} );
// -------------- DROP --------------
editable.attachListener( dropTarget, 'drop', function( evt ) {
// Do nothing if event was already prevented. (https://dev.ckeditor.com/ticket/13879)
if ( evt.data.$.defaultPrevented ) {
return;
}
// Cancel native drop.
evt.data.preventDefault();
var target = evt.data.getTarget(),
readOnly = target.isReadOnly();
// Do nothing if drop on non editable element (https://dev.ckeditor.com/ticket/13015).
// The tag isn't editable (body is), but we want to allow drop on it
// (so it is possible to drop below editor contents).
if ( readOnly && !( target.type == CKEDITOR.NODE_ELEMENT && target.is( 'html' ) ) ) {
return;
}
// Getting drop position is one of the most complex parts.
var dropRange = clipboard.getRangeAtDropPosition( evt, editor ),
dragRange = clipboard.dragRange;
// Do nothing if it was not possible to get drop range.
if ( !dropRange ) {
return;
}
// Fire drop.
fireDragEvent( evt, dragRange, dropRange );
}, null, null, 9999 );
// Create dataTransfer or get it, if it was created before.
editable.attachListener( editor, 'drop', clipboard.initDragDataTransfer, clipboard, null, 1 );
// Execute drop action, fire paste.
editable.attachListener( editor, 'drop', function( evt ) {
var data = evt.data;
if ( !data ) {
return;
}
// Let user modify drag and drop range.
var dropRange = data.dropRange,
dragRange = data.dragRange,
dataTransfer = data.dataTransfer;
if ( dataTransfer.getTransferType( editor ) == CKEDITOR.DATA_TRANSFER_INTERNAL ) {
// Execute drop with a timeout because otherwise selection, after drop,
// on IE is in the drag position, instead of drop position.
setTimeout( function() {
clipboard.internalDrop( dragRange, dropRange, dataTransfer, editor );
}, 0 );
} else if ( dataTransfer.getTransferType( editor ) == CKEDITOR.DATA_TRANSFER_CROSS_EDITORS ) {
crossEditorDrop( dragRange, dropRange, dataTransfer );
} else {
externalDrop( dropRange, dataTransfer );
}
}, null, null, 9999 );
// Cross editor drag and drop (drag in one Editor and drop in the other).
function crossEditorDrop( dragRange, dropRange, dataTransfer ) {
// Paste event should be fired before delete contents because otherwise
// Chrome have a problem with drop range (Chrome split the drop
// range container so the offset is bigger then container length).
dropRange.select();
firePasteEvents( editor, { dataTransfer: dataTransfer, method: 'drop' }, 1 );
// Remove dragged content and make a snapshot.
dataTransfer.sourceEditor.fire( 'saveSnapshot' );
dataTransfer.sourceEditor.editable().extractHtmlFromRange( dragRange );
// Make some selection before saving snapshot, otherwise error will be thrown, because
// there will be no valid selection after content is removed.
dataTransfer.sourceEditor.getSelection().selectRanges( [ dragRange ] );
dataTransfer.sourceEditor.fire( 'saveSnapshot' );
}
// Drop from external source.
function externalDrop( dropRange, dataTransfer ) {
// Paste content into the drop position.
dropRange.select();
firePasteEvents( editor, { dataTransfer: dataTransfer, method: 'drop' }, 1 );
// Usually we reset DataTranfer on dragend,
// but dragend is called on the same element as dragstart
// so it will not be called on on external drop.
clipboard.resetDragDataTransfer();
}
// Fire drag/drop events (dragstart, dragend, drop).
function fireDragEvent( evt, dragRange, dropRange ) {
var eventData = {
$: evt.data.$,
target: evt.data.getTarget()
};
if ( dragRange ) {
eventData.dragRange = dragRange;
}
if ( dropRange ) {
eventData.dropRange = dropRange;
}
if ( editor.fire( evt.name, eventData ) === false ) {
evt.data.preventDefault();
}
}
function getContainerChildCount( container ) {
if ( container.type != CKEDITOR.NODE_ELEMENT ) {
container = container.getParent();
}
return container.getChildCount();
}
} );
}
/**
* @singleton
* @class CKEDITOR.plugins.clipboard
*/
CKEDITOR.plugins.clipboard = {
/**
* True if the environment allows to set data on copy or cut manually. This value is false in IE, because this browser
* shows the security dialog window when the script tries to set clipboard data and on iOS, because custom data is
* not saved to clipboard there.
*
* @since 4.5
* @readonly
* @property {Boolean}
*/
isCustomCopyCutSupported: ( !CKEDITOR.env.ie || CKEDITOR.env.version >= 16 ) && !CKEDITOR.env.iOS,
/**
* True if the environment supports MIME types and custom data types in dataTransfer/cliboardData getData/setData methods.
*
* @since 4.5
* @readonly
* @property {Boolean}
*/
isCustomDataTypesSupported: !CKEDITOR.env.ie || CKEDITOR.env.version >= 16,
/**
* True if the environment supports File API.
*
* @since 4.5
* @readonly
* @property {Boolean}
*/
isFileApiSupported: !CKEDITOR.env.ie || CKEDITOR.env.version > 9,
/**
* Main native paste event editable should listen to.
*
* **Note:** Safari does not like the {@link CKEDITOR.editor#beforePaste} event — it sometimes does not
* handle Ctrl+C properly. This is probably caused by some race condition between events.
* Chrome, Firefox and Edge work well with both events, so it is better to use {@link CKEDITOR.editor#paste}
* which will handle pasting from e.g. browsers' menu bars.
* IE7/8 does not like the {@link CKEDITOR.editor#paste} event for which it is throwing random errors.
*
* @since 4.5
* @readonly
* @property {String}
*/
mainPasteEvent: ( CKEDITOR.env.ie && !CKEDITOR.env.edge ) ? 'beforepaste' : 'paste',
/**
* Adds a new paste button to the editor.
*
* This method should be called for buttons that should display the Paste Dialog fallback in mobile environments.
* See [the rationale](https://github.com/ckeditor/ckeditor-dev/issues/595#issuecomment-345971174) for more
* details.
*
* @since 4.9.0
* @param {CKEDITOR.editor} editor The editor instance.
* @param {String} name Name of the button.
* @param {Object} definition Definition of the button.
*/
addPasteButton: function( editor, name, definition ) {
if ( !editor.ui.addButton ) {
return;
}
editor.ui.addButton( name, definition );
if ( !editor._.pasteButtons ) {
editor._.pasteButtons = [];
}
editor._.pasteButtons.push( name );
},
/**
* Returns `true` if it is expected that a browser provides HTML data through the Clipboard API.
* If not, this method returns `false` and as a result CKEditor will use the paste bin. Read more in
* the [Clipboard Integration](https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_clipboard-section-clipboard-api) guide.
*
* @since 4.5.2
* @returns {Boolean}
*/
canClipboardApiBeTrusted: function( dataTransfer, editor ) {
// If it's an internal or cross-editor data transfer, then it means that custom cut/copy/paste support works
// and that the data were put manually on the data transfer so we can be sure that it's available.
if ( dataTransfer.getTransferType( editor ) != CKEDITOR.DATA_TRANSFER_EXTERNAL ) {
return true;
}
// In Chrome we can trust Clipboard API, with the exception of Chrome on Android (in both - mobile and desktop modes), where
// clipboard API is not available so we need to check it (https://dev.ckeditor.com/ticket/13187).
if ( CKEDITOR.env.chrome && !dataTransfer.isEmpty() ) {
return true;
}
// Because of a Firefox bug HTML data are not available in some cases (e.g. paste from Word), in such cases we
// need to use the pastebin (https://dev.ckeditor.com/ticket/13528, https://bugzilla.mozilla.org/show_bug.cgi?id=1183686).
if ( CKEDITOR.env.gecko && ( dataTransfer.getData( 'text/html' ) || dataTransfer.getFilesCount() ) ) {
return true;
}
// Safari fixed clipboard in 10.1 (https://bugs.webkit.org/show_bug.cgi?id=19893) (https://dev.ckeditor.com/ticket/16982).
// However iOS version still doesn't work well enough (https://bugs.webkit.org/show_bug.cgi?id=19893#c34).
if ( CKEDITOR.env.safari && CKEDITOR.env.version >= 603 && !CKEDITOR.env.iOS ) {
return true;
}
// Edge 15 added support for Clipboard API
// (https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6515107-clipboard-api), however it is
// usable for our case starting from Edge 16 (#468).
if ( CKEDITOR.env.edge && CKEDITOR.env.version >= 16 ) {
return true;
}
// In older Safari and IE HTML data is not available through the Clipboard API.
// In older Edge version things are also a bit messy -
// https://connect.microsoft.com/IE/feedback/details/1572456/edge-clipboard-api-text-html-content-messed-up-in-event-clipboarddata
// It is safer to use the paste bin in unknown cases.
return false;
},
/**
* Returns the element that should be used as the target for the drop event.
*
* @since 4.5
* @param {CKEDITOR.editor} editor The editor instance.
* @returns {CKEDITOR.dom.domObject} the element that should be used as the target for the drop event.
*/
getDropTarget: function( editor ) {
var editable = editor.editable();
// https://dev.ckeditor.com/ticket/11123 Firefox needs to listen on document, because otherwise event won't be fired.
// https://dev.ckeditor.com/ticket/11086 IE8 cannot listen on document.
if ( ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) || editable.isInline() ) {
return editable;
} else {
return editor.document;
}
},
/**
* IE 8 & 9 split text node on drop so the first node contains the
* text before the drop position and the second contains the rest. If you
* drag the content from the same node you will be not be able to get
* it (the range becomes invalid), so you need to join them back.
*
* Note that the first node in IE 8 & 9 is the original node object
* but with shortened content.
*
* Before:
* --- Text Node A ----------------------------------
* /\
* Drag position
*
* After (IE 8 & 9):
* --- Text Node A ----- --- Text Node B -----------
* /\ /\
* Drop position Drag position
* (invalid)
*
* After (other browsers):
* --- Text Node A ----------------------------------
* /\ /\
* Drop position Drag position
*
* **Note:** This function is in the public scope for tests usage only.
*
* @since 4.5
* @private
* @param {CKEDITOR.dom.range} dragRange The drag range.
* @param {CKEDITOR.dom.range} dropRange The drop range.
* @param {Number} preDragStartContainerChildCount The number of children of the drag range start container before the drop.
* @param {Number} preDragEndContainerChildCount The number of children of the drag range end container before the drop.
*/
fixSplitNodesAfterDrop: function( dragRange, dropRange, preDragStartContainerChildCount, preDragEndContainerChildCount ) {
var dropContainer = dropRange.startContainer;
if (
typeof preDragEndContainerChildCount != 'number' ||
typeof preDragStartContainerChildCount != 'number'
) {
return;
}
// We are only concerned about ranges anchored in elements.
if ( dropContainer.type != CKEDITOR.NODE_ELEMENT ) {
return;
}
if ( handleContainer( dragRange.startContainer, dropContainer, preDragStartContainerChildCount ) ) {
return;
}
if ( handleContainer( dragRange.endContainer, dropContainer, preDragEndContainerChildCount ) ) {
return;
}
function handleContainer( dragContainer, dropContainer, preChildCount ) {
var dragElement = dragContainer;
if ( dragElement.type == CKEDITOR.NODE_TEXT ) {
dragElement = dragContainer.getParent();
}
if ( dragElement.equals( dropContainer ) && preChildCount != dropContainer.getChildCount() ) {
applyFix( dropRange );
return true;
}
}
function applyFix( dropRange ) {
var nodeBefore = dropRange.startContainer.getChild( dropRange.startOffset - 1 ),
nodeAfter = dropRange.startContainer.getChild( dropRange.startOffset );
if (
nodeBefore && nodeBefore.type == CKEDITOR.NODE_TEXT &&
nodeAfter && nodeAfter.type == CKEDITOR.NODE_TEXT
) {
var offset = nodeBefore.getLength();
nodeBefore.setText( nodeBefore.getText() + nodeAfter.getText() );
nodeAfter.remove();
dropRange.setStart( nodeBefore, offset );
dropRange.collapse( true );
}
}
},
/**
* Checks whether turning the drag range into bookmarks will invalidate the drop range.
* This usually happens when the drop range shares the container with the drag range and is
* located after the drag range, but there are countless edge cases.
*
* This function is stricly related to {@link #internalDrop} which toggles
* order in which it creates bookmarks for both ranges based on a value returned
* by this method. In some cases this method returns a value which is not necessarily
* true in terms of what it was meant to check, but it is convenient, because
* we know how it is interpreted in {@link #internalDrop}, so the correct
* behavior of the entire algorithm is assured.
*
* **Note:** This function is in the public scope for tests usage only.
*
* @since 4.5
* @private
* @param {CKEDITOR.dom.range} dragRange The first range to compare.
* @param {CKEDITOR.dom.range} dropRange The second range to compare.
* @returns {Boolean} `true` if the first range is before the second range.
*/
isDropRangeAffectedByDragRange: function( dragRange, dropRange ) {
var dropContainer = dropRange.startContainer,
dropOffset = dropRange.endOffset;
// Both containers are the same and drop offset is at the same position or later.
// " A L] A " " M A "
// ^ ^
if ( dragRange.endContainer.equals( dropContainer ) && dragRange.endOffset <= dropOffset ) {
return true;
}
// Bookmark for drag start container will mess up with offsets.
// " O [L A " " M A "
// ^ ^
if (
dragRange.startContainer.getParent().equals( dropContainer ) &&
dragRange.startContainer.getIndex() < dropOffset
) {
return true;
}
// Bookmark for drag end container will mess up with offsets.
// " O] L A " " M A "
// ^ ^
if (
dragRange.endContainer.getParent().equals( dropContainer ) &&
dragRange.endContainer.getIndex() < dropOffset
) {
return true;
}
return false;
},
/**
* Internal drag and drop (drag and drop in the same editor instance).
*
* **Note:** This function is in the public scope for tests usage only.
*
* @since 4.5
* @private
* @param {CKEDITOR.dom.range} dragRange The first range to compare.
* @param {CKEDITOR.dom.range} dropRange The second range to compare.
* @param {CKEDITOR.plugins.clipboard.dataTransfer} dataTransfer
* @param {CKEDITOR.editor} editor
*/
internalDrop: function( dragRange, dropRange, dataTransfer, editor ) {
var clipboard = CKEDITOR.plugins.clipboard,
editable = editor.editable(),
dragBookmark, dropBookmark, isDropRangeAffected;
// Save and lock snapshot so there will be only
// one snapshot for both remove and insert content.
editor.fire( 'saveSnapshot' );
editor.fire( 'lockSnapshot', { dontUpdate: 1 } );
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 10 ) {
this.fixSplitNodesAfterDrop(
dragRange,
dropRange,
clipboard.dragStartContainerChildCount,
clipboard.dragEndContainerChildCount
);
}
// Because we manipulate multiple ranges we need to do it carefully,
// changing one range (event creating a bookmark) may make other invalid.
// We need to change ranges into bookmarks so we can manipulate them easily in the future.
// We can change the range which is later in the text before we change the preceding range.
// We call isDropRangeAffectedByDragRange to test the order of ranges.
isDropRangeAffected = this.isDropRangeAffectedByDragRange( dragRange, dropRange );
if ( !isDropRangeAffected ) {
dragBookmark = dragRange.createBookmark( false );
}
dropBookmark = dropRange.clone().createBookmark( false );
if ( isDropRangeAffected ) {
dragBookmark = dragRange.createBookmark( false );
}
// Check if drop range is inside range.
// This is an edge case when we drop something on editable's margin/padding.
// That space is not treated as a part of the range we drag, so it is possible to drop there.
// When we drop, browser tries to find closest drop position and it finds it inside drag range. (https://dev.ckeditor.com/ticket/13453)
var startNode = dragBookmark.startNode,
endNode = dragBookmark.endNode,
dropNode = dropBookmark.startNode,
dropInsideDragRange =
// Must check endNode because dragRange could be collapsed in some edge cases (simulated DnD).
endNode &&
( startNode.getPosition( dropNode ) & CKEDITOR.POSITION_PRECEDING ) &&
( endNode.getPosition( dropNode ) & CKEDITOR.POSITION_FOLLOWING );
// If the drop range happens to be inside drag range change it's position to the beginning of the drag range.
if ( dropInsideDragRange ) {
// We only change position of bookmark span that is connected with dropBookmark.
// dropRange will be overwritten and set to the dropBookmark later.
dropNode.insertBefore( startNode );
}
// No we can safely delete content for the drag range...
dragRange = editor.createRange();
dragRange.moveToBookmark( dragBookmark );
editable.extractHtmlFromRange( dragRange, 1 );
// ...and paste content into the drop position.
dropRange = editor.createRange();
dropRange.moveToBookmark( dropBookmark );
// We do not select drop range, because of may be in the place we can not set the selection
// (e.g. between blocks, in case of block widget D&D). We put range to the paste event instead.
firePasteEvents( editor, { dataTransfer: dataTransfer, method: 'drop', range: dropRange }, 1 );
editor.fire( 'unlockSnapshot' );
},
/**
* Gets the range from the `drop` event.
*
* @since 4.5
* @param {Object} domEvent A native DOM drop event object.
* @param {CKEDITOR.editor} editor The source editor instance.
* @returns {CKEDITOR.dom.range} range at drop position.
*/
getRangeAtDropPosition: function( dropEvt, editor ) {
var $evt = dropEvt.data.$,
x = $evt.clientX,
y = $evt.clientY,
$range,
defaultRange = editor.getSelection( true ).getRanges()[ 0 ],
range = editor.createRange();
// Make testing possible.
if ( dropEvt.data.testRange )
return dropEvt.data.testRange;
// Webkits.
if ( document.caretRangeFromPoint && editor.document.$.caretRangeFromPoint( x, y ) ) {
$range = editor.document.$.caretRangeFromPoint( x, y );
range.setStart( CKEDITOR.dom.node( $range.startContainer ), $range.startOffset );
range.collapse( true );
}
// FF.
else if ( $evt.rangeParent ) {
range.setStart( CKEDITOR.dom.node( $evt.rangeParent ), $evt.rangeOffset );
range.collapse( true );
}
// IEs 9+.
// We check if editable is focused to make sure that it's an internal DnD. External DnD must use the second
// mechanism because of https://dev.ckeditor.com/ticket/13472#comment:6.
else if ( CKEDITOR.env.ie && CKEDITOR.env.version > 8 && defaultRange && editor.editable().hasFocus ) {
// On IE 9+ range by default is where we expected it.
// defaultRange may be undefined if dragover was canceled (file drop).
return defaultRange;
}
// IE 8 and all IEs if !defaultRange or external DnD.
else if ( document.body.createTextRange ) {
// To use this method we need a focus (which may be somewhere else in case of external drop).
editor.focus();
$range = editor.document.getBody().$.createTextRange();
try {
var sucess = false;
// If user drop between text line IEs moveToPoint throws exception:
//
// Lorem ipsum pulvinar purus et euismod
//
// dolor sit amet,| consectetur adipiscing
// *
// vestibulum tincidunt augue eget tempus.
//
// * - drop position
// | - expected cursor position
//
// So we try to call moveToPoint with +-1px up to +-20px above or
// below original drop position to find nearest good drop position.
for ( var i = 0; i < 20 && !sucess; i++ ) {
if ( !sucess ) {
try {
$range.moveToPoint( x, y - i );
sucess = true;
} catch ( err ) {
}
}
if ( !sucess ) {
try {
$range.moveToPoint( x, y + i );
sucess = true;
} catch ( err ) {
}
}
}
if ( sucess ) {
var id = 'cke-temp-' + ( new Date() ).getTime();
$range.pasteHTML( '\u200b' );
var span = editor.document.getById( id );
range.moveToPosition( span, CKEDITOR.POSITION_BEFORE_START );
span.remove();
} else {
// If the fist method does not succeed we might be next to
// the short element (like header):
//
// Lorem ipsum pulvinar purus et euismod.
//
//
// SOME HEADER| *
//
//
// vestibulum tincidunt augue eget tempus.
//
// * - drop position
// | - expected cursor position
//
// In such situation elementFromPoint returns proper element. Using getClientRect
// it is possible to check if the cursor should be at the beginning or at the end
// of paragraph.
var $element = editor.document.$.elementFromPoint( x, y ),
element = new CKEDITOR.dom.element( $element ),
rect;
if ( !element.equals( editor.editable() ) && element.getName() != 'html' ) {
rect = element.getClientRect();
if ( x < rect.left ) {
range.setStartAt( element, CKEDITOR.POSITION_AFTER_START );
range.collapse( true );
} else {
range.setStartAt( element, CKEDITOR.POSITION_BEFORE_END );
range.collapse( true );
}
}
// If drop happens on no element elementFromPoint returns html or body.
//
// * |Lorem ipsum pulvinar purus et euismod.
//
// vestibulum tincidunt augue eget tempus.
//
// * - drop position
// | - expected cursor position
//
// In such case we can try to use default selection. If startContainer is not
// 'editable' element it is probably proper selection.
else if ( defaultRange && defaultRange.startContainer &&
!defaultRange.startContainer.equals( editor.editable() ) ) {
return defaultRange;
// Otherwise we can not find any drop position and we have to return null
// and cancel drop event.
} else {
return null;
}
}
} catch ( err ) {
return null;
}
} else {
return null;
}
return range;
},
/**
* This function tries to link the `evt.data.dataTransfer` property of the {@link CKEDITOR.editor#dragstart},
* {@link CKEDITOR.editor#dragend} and {@link CKEDITOR.editor#drop} events to a single
* {@link CKEDITOR.plugins.clipboard.dataTransfer} object.
*
* This method is automatically used by the core of the drag and drop functionality and
* usually does not have to be called manually when using the drag and drop events.
*
* This method behaves differently depending on whether the drag and drop events were fired
* artificially (to represent a non-native drag and drop) or whether they were caused by the native drag and drop.
*
* If the native event is not available, then it will create a new {@link CKEDITOR.plugins.clipboard.dataTransfer}
* instance (if it does not exist already) and will link it to this and all following event objects until
* the {@link #resetDragDataTransfer} method is called. It means that all three drag and drop events must be fired
* in order to ensure that the data transfer is bound correctly.
*
* If the native event is available, then the {@link CKEDITOR.plugins.clipboard.dataTransfer} is identified
* by its ID and a new instance is assigned to the `evt.data.dataTransfer` only if the ID changed or
* the {@link #resetDragDataTransfer} method was called.
*
* @since 4.5
* @param {CKEDITOR.dom.event} [evt] A drop event object.
* @param {CKEDITOR.editor} [sourceEditor] The source editor instance.
*/
initDragDataTransfer: function( evt, sourceEditor ) {
// Create a new dataTransfer object based on the drop event.
// If this event was used on dragstart to create dataTransfer
// both dataTransfer objects will have the same id.
var nativeDataTransfer = evt.data.$ ? evt.data.$.dataTransfer : null,
dataTransfer = new this.dataTransfer( nativeDataTransfer, sourceEditor );
// Set dataTransfer.id only for 'dragstart' event (so for events initializing dataTransfer inside editor) (#962).
if ( evt.name === 'dragstart' ) {
dataTransfer.storeId();
}
if ( !nativeDataTransfer ) {
// No native event.
if ( this.dragData ) {
dataTransfer = this.dragData;
} else {
this.dragData = dataTransfer;
}
} else {
// Native event. If there is the same id we will replace dataTransfer with the one
// created on drag, because it contains drag editor, drag content and so on.
// Otherwise (in case of drag from external source) we save new object to
// the global clipboard.dragData.
if ( this.dragData && dataTransfer.id == this.dragData.id ) {
dataTransfer = this.dragData;
} else {
this.dragData = dataTransfer;
}
}
evt.data.dataTransfer = dataTransfer;
},
/**
* Removes the global {@link #dragData} so the next call to {@link #initDragDataTransfer}
* always creates a new instance of {@link CKEDITOR.plugins.clipboard.dataTransfer}.
*
* @since 4.5
*/
resetDragDataTransfer: function() {
this.dragData = null;
},
/**
* Global object storing the data transfer of the current drag and drop operation.
* Do not use it directly, use {@link #initDragDataTransfer} and {@link #resetDragDataTransfer}.
*
* Note: This object is global (meaning that it is not related to a single editor instance)
* in order to handle drag and drop from one editor into another.
*
* @since 4.5
* @private
* @property {CKEDITOR.plugins.clipboard.dataTransfer} dragData
*/
/**
* Range object to save the drag range and remove its content after the drop.
*
* @since 4.5
* @private
* @property {CKEDITOR.dom.range} dragRange
*/
/**
* Initializes and links data transfer objects based on the paste event. If the data
* transfer object was already initialized on this event, the function will
* return that object. In IE it is not possible to link copy/cut and paste events
* so the method always returns a new object. The same happens if there is no paste event
* passed to the method.
*
* @since 4.5
* @param {CKEDITOR.dom.event} [evt] A paste event object.
* @param {CKEDITOR.editor} [sourceEditor] The source editor instance.
* @returns {CKEDITOR.plugins.clipboard.dataTransfer} The data transfer object.
*/
initPasteDataTransfer: function( evt, sourceEditor ) {
if ( !this.isCustomCopyCutSupported ) {
// Edge < 16 does not support custom copy/cut, but it has some useful data in the clipboardData (https://dev.ckeditor.com/ticket/13755).
return new this.dataTransfer( ( CKEDITOR.env.edge && evt && evt.data.$ && evt.data.$.clipboardData ) || null, sourceEditor );
} else if ( evt && evt.data && evt.data.$ ) {
var clipboardData = evt.data.$.clipboardData,
dataTransfer = new this.dataTransfer( clipboardData, sourceEditor );
// Set dataTransfer.id only for 'copy'/'cut' events (so for events initializing dataTransfer inside editor) (#962).
if ( evt.name === 'copy' || evt.name === 'cut' ) {
dataTransfer.storeId();
}
if ( this.copyCutData && dataTransfer.id == this.copyCutData.id ) {
dataTransfer = this.copyCutData;
dataTransfer.$ = clipboardData;
} else {
this.copyCutData = dataTransfer;
}
return dataTransfer;
} else {
return new this.dataTransfer( null, sourceEditor );
}
},
/**
* Prevents dropping on the specified element.
*
* @since 4.5
* @param {CKEDITOR.dom.element} element The element on which dropping should be disabled.
*/
preventDefaultDropOnElement: function( element ) {
element && element.on( 'dragover', preventDefaultSetDropEffectToNone );
}
};
// Data type used to link drag and drop events.
//
// In IE URL data type is buggie and there is no way to mark drag & drop without
// modifying text data (which would be displayed if user drop content to the textarea)
// so we just read dragged text.
//
// In Chrome and Firefox we can use custom data types.
clipboardIdDataType = CKEDITOR.plugins.clipboard.isCustomDataTypesSupported ? 'cke/id' : 'Text';
/**
* Facade for the native `dataTransfer`/`clipboadData` object to hide all differences
* between browsers.
*
* @since 4.5
* @class CKEDITOR.plugins.clipboard.dataTransfer
* @constructor Creates a class instance.
* @param {Object} [nativeDataTransfer] A native data transfer object.
* @param {CKEDITOR.editor} [editor] The source editor instance. If the editor is defined, dataValue will
* be created based on the editor content and the type will be 'html'.
*/
CKEDITOR.plugins.clipboard.dataTransfer = function( nativeDataTransfer, editor ) {
if ( nativeDataTransfer ) {
this.$ = nativeDataTransfer;
}
this._ = {
metaRegExp: /^