通過點擊圖片生成降價代碼

Question

我有一個帶有SimpleMDE的textarea。

這是邏輯： 我選擇要上傳的文件(done)，那麼就通過上傳文件的AJAX（jQuery的文件上傳）(done)，然後列出表格(done)下的所有文件uploded。

到目前爲止好，但我想要達到現在當我點擊我想要得到的圖像的src屬性（http://www.website.com/path/to/image.jpg），並自動將其添加在SimpleMDE這樣

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

的圖像之一

因此無需每次手動輸入。

理想情況下，我的光標在SimpleMDE中，或者如果這在內容的末尾是不可能的。

我該怎麼做？

編輯

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

這是我的代碼

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

這是textare樣子的螢火蟲作爲SimpleMDE增加了一些更多的東西

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

這是AJAX腳本獲取圖像列表和我堅持的觀點

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

使用simplemde.value()從the Simple MDE docs，您應該能夠以編程方式將圖像添加到markdown的末尾。但是，無論您在代碼中調用當前設置編輯器的位置，您都必須將simplemde設置爲new SimpleMDE()返回的值。

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