点击图片生成markdown代码
Generate markdown code by clicking image
我有一个带有 SimpleMDE 的文本区域。
逻辑是这样的:
我 select 一个要上传的文件 (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>
这是文本在 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;"> </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)
});
}
});
使用 the Simple MDE docs 中的 simplemde.value()
,您应该能够以编程方式将图像添加到 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 + ')'
)
})
我有一个带有 SimpleMDE 的文本区域。
逻辑是这样的:
我 select 一个要上传的文件 (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>
这是文本在 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;"> </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)
});
}
});
使用 the Simple MDE docs 中的 simplemde.value()
,您应该能够以编程方式将图像添加到 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 + ')'
)
})