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,

6 thoughts on “How to Integrate Extjs Tree Panel Drag And Drop Into Extjs HtmlEditor

  1. you will have to find your own id. the ext-gen10 is an example here. You can replace it with any parent of the element you want to drop

  2. Why I asked, because I suppose that such ID should not be hard-coded in Javascript code. Because even in your example/demo there is no element with such id.
    Another question, I tried to open your demo, how does it work? I see only HTMLEditor.

  3. Also, my suggestion would be to let visitors download test.js (3Kb) alone of the ExtJS full distribution (14MB).

Comments are closed.