Hi All,
New here, evaluating CKEditor for integration into our application. So far so good with the exception of a way to customize drag-drop.
I found a snippet somewhere on the web(sorry lost the url) to get a handle on the drop/drag event by changing config.js :
editor.document.$.addEventListener('drop', somefunction, true);
This is fine if you want to say, throw an alert box before a drop occurs, or disable the drop functionality altogether. I understand that most drag and drop API's will not have references to the originally dragged element because it is not part of the event, so I'm not expecting that sort of functionality to be readily available without custom code. The text and image drag I believe are browser controlled pieces of functionality but I could be wrong.
What I'm looking for is some help on how to integrate a drag and drop in the following manner:
1)Drag an arbitary DOM element(UL/TD/etc) into the editor and get a handle on that event.
2)Have the cursor in CKEditor move along with the dragged element's picture/preview, according to mouse position
3)On drop it will execute some logic in order to determine what text to drop into the editor, not necessarily the HTML representation of the element being dragged.
A use case for this would be a user trying to drag an image or dom element that represents a legal disclaimer template. Upon drop, the entire legal disclaimer template would be placed at the active cursor position.
Thus far I have a few (admittedly hack-ish) ways to do this in my mind :
i) Use images, on mouse down to start a drag, flag this particular dom element in a global scope, on drop, reference that global and perform logic based on some attribute bound to the referenced element. On mouse up in all cases, clear global value. This allows the usage of the default cursor movement and drag but falls short for the preview since we won't be generating images for each arbitrary text value within the DOM element. Edit : This doesn't actually work. the inserted text goes to the last known cursor position before drag began.
ii) Force auto-select of text that should be inserted into the editor on mouse down. This works most of the time for the mouse down->drag->mouse up case by emulating text select and drag. It also generates an accurate preview, but functionally falls short because drag-select actions on text will not trigger the select all code and cause partial selections and failed drags.
Any clues or ideas would be appreciated.
Thanks,
Kevin
New here, evaluating CKEditor for integration into our application. So far so good with the exception of a way to customize drag-drop.
I found a snippet somewhere on the web(sorry lost the url) to get a handle on the drop/drag event by changing config.js :
editor.document.$.addEventListener('drop', somefunction, true);
This is fine if you want to say, throw an alert box before a drop occurs, or disable the drop functionality altogether. I understand that most drag and drop API's will not have references to the originally dragged element because it is not part of the event, so I'm not expecting that sort of functionality to be readily available without custom code. The text and image drag I believe are browser controlled pieces of functionality but I could be wrong.
What I'm looking for is some help on how to integrate a drag and drop in the following manner:
1)Drag an arbitary DOM element(UL/TD/etc) into the editor and get a handle on that event.
2)Have the cursor in CKEditor move along with the dragged element's picture/preview, according to mouse position
3)On drop it will execute some logic in order to determine what text to drop into the editor, not necessarily the HTML representation of the element being dragged.
A use case for this would be a user trying to drag an image or dom element that represents a legal disclaimer template. Upon drop, the entire legal disclaimer template would be placed at the active cursor position.
Thus far I have a few (admittedly hack-ish) ways to do this in my mind :
i) Use images, on mouse down to start a drag, flag this particular dom element in a global scope, on drop, reference that global and perform logic based on some attribute bound to the referenced element. On mouse up in all cases, clear global value. This allows the usage of the default cursor movement and drag but falls short for the preview since we won't be generating images for each arbitrary text value within the DOM element. Edit : This doesn't actually work. the inserted text goes to the last known cursor position before drag began.
ii) Force auto-select of text that should be inserted into the editor on mouse down. This works most of the time for the mouse down->drag->mouse up case by emulating text select and drag. It also generates an accurate preview, but functionally falls short because drag-select actions on text will not trigger the select all code and cause partial selections and failed drags.
Any clues or ideas would be appreciated.
Thanks,
Kevin