将 html 转换为 bbcode 的 Javascript，用于带有链接的图像

Question

我有一个用 php 制作的图片库。我做了一个小的 php 脚本，它用我最近上传的图片生成一个代码，一个具有这样结构的缩略图列表(如果需要我可以改变结构):

<div class="thumbs">
<img src="http://placehold.it/100x100" alt="http://example.com/picture1.php" class="bbcode" />
<img src="http://placehold.it/99x99" alt="http://example.com/picture2.php" class="bbcode" />
</div>

<textarea class="message" rows="10" cols="60">

</textarea>

演示 https://jsfiddle.net/xwhg3nch/

我需要一个 javascript(可以基于任何 JS 库)，当我单击图片以在我的文本区域中创建带有链接的 BBCODE 图像时，例如:

[url=http://example.com/picture1.php][img]http://placehold.it/100x100[/img][/url]
[url=http://example.com/picture2.php][img]http://placehold.it/99x99[/img][/url] 

并在图片周围放置一个小边框(让我看到我已经点击了该图片)。

谢谢

Answer 1

您好，使用 jquery，您可以使用点击功能

$('body').on('click', 'img.bbcode', function() {
var imgsrc = $(this).attr('src');
$('.message').append('[url=' + imgsrc + '][img]' + imgsrc + '[/img][/url]');
$(this).css('border', '1px solid #000');
});

https://jsfiddle.net/x5sgycuk/1/

希望对你有帮助