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>

DEMO https://jsfiddle.net/xwhg3nch/

我需要一个javascript（可以基于任何JS库），当我点击图片在我的textarea中创建一个带有链接的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/

希望有所帮助

Answer 2

这是纯粹的JS：

var imgs = document.getElementsByClassName("bbcode");
var textArea = document.getElementsByClassName("message")[0];
var length = imgs.length;

for ( i = 0; i < length; i++ ) {
    var element = imgs[i];

  element.addEventListener("click", function(){
    var imgSrc = element.src;
    textArea.value += "[url=" + imgSrc + "][img]" + imgSrc + "[/img][/url]";
  });
}

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

2 个答案: