drag and drop into fckeditor

I had noticed that link before, but thought it wasn't really appropriate for what I want.

What I need is an event which is raised when an object is dropped into FCKeditor, which I can then overload with a custom handler which will insert the actual HTML I wanted - not the external HTML which might just be a representation.

In the example you cited, I think an actual object is moved from one location to another. That's not quite what I need.

I've left this running as an background thought in my head for a few weeks. A solution is presenting itself slowly, but it will be another while before it is presentable.

I'll post it here when I finally solve it.

got it working.

The way I managed it was to use the FCKeditor_OnComplete event to initialise an onmouseup event on every element in the editor, and onmouseout, onmouseover, onmousemove events on the editor window itself.

When the onmouseover is triggered, FCKeditor builds a clone of the parent window's dragged element and shows it in the editor (and hides the external one). you can then drag that around, using the mousemove event to track it.

When onmouseup is triggered, a function inserts HTML into the editor based on the dragged element type. The location is decided by using FCKSelection.SelectNode(e.currentTarget) (e is the event) and FCKSelection.Collapse(false) - so the element will be placed at the end of whatever element the mouseup is triggered on. (if anyone knows how to make it finer than that, placing the cursor at the mouse position, then please help!)

at the moment, the code is pretty specific to my own needs, but I'm sure other people could find a way of subverting it!

Firefox-only, at the moment, because I don't have IE on this machine, and won't be near a Windows machine until Wednesday or so.

There's still work to do on it, but I'm pretty happy with it so far.

For your amusement, here is the current state of the code (still with hooks into one of my projects). For now, you'll need to figure out how to use it yourself


/*
KFCKDrag - a drag/drop thing for fckeditor
this plugin allows an external drag/drop item to be dragged into the FCKeditor window.
when the mouse is released, a function is called which decides what to do based on the dragged object type.
*/
window.parent.FCKeditor_OnComplete=function(FCK){
FCK.kfd_dragstate=false;
kfd_windowEventsInit(FCK.EditorWindow,FCK.EditorDocument); // initialise window events
kfd_elementEventsInit(FCK.EditorDocument); // add mouseup drop checker to every element
}
function getEvent(e){
return e?e:(window.event?window.event:"");
}
function getMouseAt(e){
e=getEvent(e);
var m=getWindowScrollAt();
m.x+=e.clientX;
m.y+=e.clientY;
return m;
}
function getWindowSize(){
return {x:window.innerWidth,y:window.innerHeight};
}
function getWindowScrollAt(){
return {x:window.pageXOffset,y:window.pageYOffset};
}
function kfd_elementEventsInit(doc){
var els=doc.getElementsByTagName('*');
for(var i=0;i<els.length;++i){
var el=els[i];
if(el.kfd_initialised)continue;
el.addEventListener('mouseup',kfd_checkForDrop,false);
el.kfd_initialised=true;
}
}
function kfd_windowEventsInit(win,doc){
win.addEventListener('mouseover',function(){
if(FCK.kfd_dragstate)return;
var p=window.parent;
FCK.kfd_dragstate=p.dragType;
if(p.dragType){
FCK.drag_wrapper=p.drag_wrapper.cloneNode(true);
p.drag_wrapper.style.display='none';
FCK.drag_wrapper.id='kfd_dragWrapper';
doc.body.appendChild(FCK.drag_wrapper);
}
},false);
win.addEventListener('mouseout',function(e){
var m=getMouseAt(e),ws=getWindowSize();
if((m.x>=0&&m.x<ws.x&&m.y>=0&&m.y<ws.y))return; // browser bug triggers fake mouseouts sometimes...
kfd_stopDragging();
if(window.parent.drag_wrapper)window.parent.drag_wrapper.style.display='block';
},false);
win.addEventListener('mousemove',function(e){
if(!FCK.kfd_dragstate)return;
var m=getMouseAt(e);
FCK.drag_wrapper.style.left=(m.x+16)+'px';
FCK.drag_wrapper.style.top=m.y+'px';
window.parent.drag_wrapper.style.display='none';
},false);
}
function kfd_stopDragging(){
if(FCK.kfd_dragstate){
FCK.kfd_dragstate=false;
FCK.EditorDocument.body.removeChild(FCK.drag_wrapper);
FCK.drag_wrapper=null;
}
}
function kfd_checkForDrop(e){
if(!FCK.kfd_dragstate)return; // nothing being dragged
var p=window.parent;
var type=p.dragType,wrapper=p.drag_wrapper;
var id=wrapper.cmp_id,name=wrapper.innerHTML;
FCKSelection.SelectNode(e.currentTarget);
FCKSelection.Collapse(false);
FCK.InsertHtml('<a href="'+id+'">'+name+'</a>');
e.stopPropagation();
kfd_stopDragging();
if(window.parent.componentTree_dragFinish)window.parent.componentTree_dragFinish(e);
}