Drag and Drop functionality with CodeMirror

Question

I am currently working on a project that involves CodeMirror's drag-and-drop functionality. I am trying to press a button (WITH AN HTML TAG VALUE TO BE SET INTO THE CODEMIRROR EDITOR) and drag and drop it into the code editor at a specific line.

My efforts have got me as far as when I drag the item into the editor only the URL of the webpage is deposited into the editor. I am not sure where this is generated from, possibly a value attribute? But I cannot find anything online to help me with the subject.

How do I get the drag and drop to insert the desired text instead of the URL?

(Unfortunately, I cannot post any exact code due to this being a work project)

Thanks, Matt

*PS.this is embedded within a Zend_Form

Answer 1

Well, Unless you dont provide the sample code , I cannot understand the exact problem.

As far as I understood, You can trigger the drag and drop events of codemirror and perform the required task very efficiently.

For more understanding, refer the code below:

editor.on("dragstart",function(editor,e) {
    console.log('dragstart')
});
editor.on("dragenter",function(editor,e) {
    console.log('dragenter')
});
editor.on("dragover",function(editor,e) {
    console.log('dragover')
});
editor.on("drop",function(editor,e) { 
    console.log('drop')
});

Now, instead of printing the logs, you could just perform your task with the help of DOM and some bit understand of JQuery if required.