2

我有一个带有 SimpleMDE 的文本区域。

在此处输入图像描述

这是逻辑：我选择要上传的文件(done)，然后通过 ajax (jquery-fileupload) 上传文件(done)，然后在表单下方列出所有上传的文件(done)。

到目前为止一切都很好，但我现在想要实现的是当我单击我想要获取图像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 在 firebug 上的样子，因为 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="">​&lt;/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)
        });
    }
});
4

1 回答 1

1

使用Simple MDE docs，您应该能够以编程方式将图像添加到 Markdown 的末尾simplemde.value()。但是，您必须设置为返回的值，无论您当前在代码中调用什么来设置编辑器。simplemdenew 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 + ')'
    )
})
于 2017-02-23T12:58:23.560 回答