Search code examples
javascriptjquerywysiwygsimplemde

Generate markdown code by clicking image

I'm having a textarea with SimpleMDE.

enter image description here

This is the logic: I select a file to upload (done), then do upload file via ajax (jquery-fileupload) (done), then list all uploded files below the form (done).

So far so good, but what I'm trying to achieve now is when I click one of the images I want to get the image's src attribute (http://www.website.com/path/to/image.jpg) and automatically add it in SimpleMDE like this 

![](http://www.website.com/path/to/image.jpg)

so without having to type in manually each time.

Ideally to the point where my cursor is in the SimpleMDE, or if this is not possible at the end of the content.

How can I do this??

EDIT

<div id="show_content_attachements">
    <ul class="list-inline list-unstyled">
        <li><img src="http://usercontent.bf.ocm/assets/8B2E538D92EBA645/googlemaps.jpg" style="width: 100px;" class="post-image"></li>
        <li><img src="http://usercontent.bf.ocm/assets/8B2E538D92EBA645/test_upload.jpg" style="width: 100px;" class="post-image"></li>
    </ul>
</div>

This is my code 

<textarea name="content" id="content"  class="simplemde">
</textarea>
<br/>
<input type="file" id="content_attachements" name="content_attachements" />
<br/>
<div id="show_content_attachements"></div>

This is what the textare looks like on firebug as SimpleMDE adds some more stuff

<td class="input">
    <textarea name="content" id="content" class="simplemde" style="display: none;"></textarea>
    <div class="editor-toolbar">
        <a title="Bold (Ctrl-B)" tabindex="-1" class="fa fa-bold"></a>
        <a title="Italic (Ctrl-I)" tabindex="-1" class="fa fa-italic"></a>
        <a title="Heading (Ctrl-H)" tabindex="-1" class="fa fa-header"></a><i class="separator">|</i>
        <a title="Quote (Ctrl-')" tabindex="-1" class="fa fa-quote-left"></a>
        <a title="Generic List (Ctrl-L)" tabindex="-1" class="fa fa-list-ul"></a>
        <a title="Numbered List (Ctrl-Alt-L)" tabindex="-1" class="fa fa-list-ol"></a><i class="separator">|</i>
        <a title="Create Link (Ctrl-K)" tabindex="-1" class="fa fa-link"></a><i class="separator">|</i>
        <a title="Toggle Preview (Ctrl-P)" tabindex="-1" class="fa fa-eye no-disable"></a>
        <a title="Toggle Side by Side (F9)" tabindex="-1" class="fa fa-columns no-disable no-mobile"></a>
        <a title="Toggle Fullscreen (F11)" tabindex="-1" class="fa fa-arrows-alt no-disable no-mobile"></a><i class="separator">|</i>
        <a title="Markdown Guide" tabindex="-1" class="fa fa-question-circle" href="https://simplemde.com/markdown-guide" target="_blank"></a>
    </div>
    <div class="CodeMirror cm-s-paper CodeMirror-wrap">
        <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 15px; left: 15px;">
            <textarea style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: medium none;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" wrap="off"></textarea>
        </div>
        <div class="CodeMirror-vscrollbar" cm-not-content="true">
            <div style="min-width: 1px; height: 0px;"></div>
        </div>
        <div class="CodeMirror-hscrollbar" cm-not-content="true">
            <div style="height: 100%; min-height: 1px; width: 0px;"></div>
        </div>
        <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
        <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
        <div class="CodeMirror-scroll" tabindex="-1" draggable="true">
            <div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: -17px; border-right-width: 13px; min-height: 28px; padding-right: 0px; padding-bottom: 0px;">
                <div style="position: relative; top: 0px;">
                    <div class="CodeMirror-lines">
                        <div style="position: relative; outline: medium none;">
                            <div class="CodeMirror-measure"></div>
                            <div class="CodeMirror-measure"></div>
                            <div style="position: relative; z-index: 1;"></div>
                            <div class="CodeMirror-cursors" style="">
                                <div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 20px;">&nbsp;</div>
                            </div>
                            <div class="CodeMirror-code"><pre class=" CodeMirror-line "><span><span cm-text="">​</span></span></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="position: absolute; height: 13px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div>
            <div class="CodeMirror-gutters" style="display: none; height: 41px;"></div>
        </div>
    </div>
    <div class="editor-preview-side"></div>
    <div class="editor-statusbar"><span class="autosave"></span><span class="lines">1</span><span class="words">0</span><span class="cursor">0:0</span>
    </div>
    <br>
    <input id="content_attachements" name="content_attachements" type="file">
    <br>
    <div id="show_content_attachements">
        <ul class="list-inline list-unstyled">
            <li><img src="http://usercontent.bf.com/assets/8B2E538D92EBA645/googlemaps.jpg" style="width: 100px;" class="post-image">
            </li>
            <li><img src="http://usercontent.bf.com/assets/8B2E538D92EBA645/test_upload.jpg" style="width: 100px;" class="post-image">
            </li>
        </ul>
    </div>
</td>

This is the ajax script that gets the list of images and the point I've stuck

$.ajax({
    url : filesUrl,
    dataType: 'HTML',
    success: function (data) {
    $('#show_content_attachements').append(data);

        // target which image is clicked and get the src
        $('.post-image').on('click', function() {
            alert($(this).attr("src"));

            // add image src to SimpleMDE as markdown code --> ![](http://www.website.com/path/to/image.jpg)
        });
    }
});
Solution

  • Using simplemde.value() from the Simple MDE docs, you should be able to add your images to the end of your markdown programmatically. However, you have to set simplemde to the value returned by new SimpleMDE(), wherever you call that currently in your code to set up the editor.

    var attachments = document.getElementById('show_content_attachements')

attachments.addEventListener('click', function (e) {
    if (e.target.tagName === 'IMG') simplemde.value(
        simplemde.value() + '\n![](' + e.target.src + ')'
    )
})