How to Integrate Extjs Tree Panel Drag And Drop Into Extjs HtmlEditor

This is a problem that i face during an integration with Extjs Tree Panel drag and drop functionality into extjs htmleditor. The research process doesn't take very long because the only clue online was extjs forum with the title "Drag and drop into child iframe document". Many said it was impossible. But there were actually people who had done this previously and successfully drag and drop tree panel items into extjs htmleditor. However, many will be clueless without a proper demo or actual code to see the effect of such implementation.  The forum page do exist code that could be of help in your implementation but you would really need to guess and try to see whether it works. In my case, i manage to get it work.

Htmleditor Problem

The problem was fairly straight forward. The drag and drop functionality in extjs cannot drag into iframe. Our Extjs htmleditor is using iframe for their editor implementation. Therefore, if you try to drag your items into the iframe, it will basically stuck somewhere outside of the htmleditor/iframe. Drop is also an issue since the drop behavior is being stopped by the implementation done by the htmleditor. Now, our objective here in this article is to make it so that the drag and drop will work within the iframe.

Drag and drop into htmleditor Solution

The solutions here is to overwrite the behavior of the htmleditor so that it accept the drag items into the iframe. This can be done using Extjs Event manager as shown below,

pushValue: function(){
	var ddm = Ext.dd.DragDropMgr;
	Ext.EventManager.on(this.iframe.contentDocument, "mousemove", ddm.handleMouseMove, ddm, true);
	Ext.EventManager.on(this.iframe.contentDocument, "mouseup", ddm.handleMouseUp, ddm, true);
},

The above code utilized htmleditor pushValue functionality to overwrite two behavior on extjs htmleditor. mousemove and mouseup is overwritten with the default behavior of Ext.dd.DragDropMgr. This will allow the behavior to properly mouseover the htmleditor content and also drop it accordingly. Once you have done that, your treepanel items should have no problem dragging around the htmleditor. However, drop will still be an issue since we haven't attached the appropriate drop zone into the htmleditor.

DropZone on Htmleditor

In order to drag the items on the treepanel into the extjs htmleditor, we will definitely needs to define a dragzone which is similiar to the dragzone on the treepanel. However to create a dragzone, the component must be initialized before any attachment can be done. Hence, we will create a listeners on htmleditor to see when it is render so that we can attach a dragzone into it.

listeners: {
	'render': function(){
		var DCZone = new Ext.dd.DropZone(Ext.get('ext-gen10'), {
			ddGroup: 'DCZone',
			/* If the mouse is over a target node, return that node. This is
			provided as the "target" parameter in all "onNodeXXXX" node event handling functions */
			getTargetFromEvent: function(e) {
				//console.log('getTargetFromEvent'+new Date().getTime());
				return e.getTarget();
			},

			/* On node drop, we can interrogate the target node to find the underlying
			application object that is the real target of the dragged data.
			We can use the data set up by the DragZone's getDragData method to read
			any data we decided to attach. */
			onNodeDrop : function(target, dd, e, data){
				console.log('onNodeDrop');
				// do your work here

				Ext.fly(this.getEl()).frame("00AE00");
				return true;
			}
		});

	}
}

Now, the important part here for our htmleditor iframe to work so that the drop items will land on it is the overwrite function of getTargetFromEvent. If this function doesn't exist, the whole thing must not work. Therefore, the method is important to have. Ext.get('ext-gen10') is the parent element of the iframe. Once this are all done properly, you should be able to get an iframe that is draggable and droppable into it.

 

Solution Demo

Like i have mention, a demo will be much more appropriate. Hence, here's an attachment of what i have been saying.