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

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 库），当我单击图片以在我的文本区域中为其创建带有 link 的 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，用于带有链接的图像

Javascript to convert html to bbcode, for images with links

javascript

jquery

bbcode