Question

I am trying to adapt this script: jQuery Example: Inserting text with drag n’ drop.

The goal is for my users to click an image thumbnail and have the appropriate markdown image code inserted into the textarea.

I am not familiar with JS, so I am aware that the meat of the script is happening here:

$('#ClickWordList li').click(function() {
    $("#txtMessage").insertAtCaret($(this).text());
        return false
    });

specifically, the .text() bit there, but do not know how to alter the output to suit my needs for a snippet of markdown being inserted rather than just, say, the list text.

Markdown inline image syntax looks like this: ![Alt text](/path/to/img.jpg)

I tried changing the list to a div with images and then changing to .insertAtCaret($(this).src); but I get “undefined” as the insertion text.

Answer 1

$(this).src is undefined because $(this) is a jQuery object, and jQuery objects don’t have a src property. Assuming you have an image element in your selector, You can try:

$("#txtMessage").insertAtCaret($(this).attr('src'));

The .attr() jQuery method, when given only one parameter, will return the matched element’s given attribute’s value.

or

$("#txtMessage").insertAtCaret($(this)[0].src);

To get the literal DOM element’s src.

Extra explanations (if you need)
The .text() jQuery method, when given no parameters, will return all text inside of the element referenced by this, that is, the event’s target, in this case the clicked li inside the #ClickWordList element.

.insertAtCaret() is an extended function of the jQuery object provided by your drag 'n drop plugin.

return false will do exactly what it says, returning false in the click event’s handler for the selected element, which simply cancels the event and prevents its propagation from bubbling up the DOM further.

Sorry if there are any typos.