Generieren Sie Markdown-Code, indem Sie auf das Bild klicken

Question

Ich habe eine Textarea mit SimpleMDE.

Das ist die Logik: ich eine Datei auswählen (done) hochzuladen, kann dann Datei über Ajax laden (jquery-Fileupload) (done), dann alle uploded Dateien (done) unter dem Formular Liste.

weit, so gut also, aber was ich versuche jetzt zu erreichen ist, wenn ich eines der Bilder klicken ich das Bild des src Attribut (http://www.website.com/path/to/image.jpg) und fügen Sie automatisch in SimpleMDE wie diese

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

erhalten möchten

also ohne jedes Mal manuell eingeben zu müssen.

Ideal zu dem Punkt, wo mein Cursor in der SimpleMDE ist, oder wenn das am Ende des Inhalts nicht möglich ist.

Wie kann ich das tun ??

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> 

Dies ist mein 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> 

Dies ist, was die textare wie auf firebug sieht aus, als SimpleMDE einige weitere Slideshows erstellt

<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> 

Dies ist die Ajax-Skript das bekommt die Liste der Bilder und der Punkt, den ich feststecke

$.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) 
     }); 
    } 
}); 

Answer 1

Mit simplemde.value() von the Simple MDE docs sollten Sie in der Lage sein, Ihre Bilder am Ende Ihrer Abschrift programmatisch hinzuzufügen. Sie müssen simplemde jedoch auf den Wert setzen, der von new SimpleMDE() zurückgegeben wird, wo immer Sie den Code in Ihrem Code aufrufen, um den Editor einzurichten.

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 + ')' 
    ) 
})