代码之家 › 专栏 › 技术社区 › crisc2000

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

bbcode jquery javascript

1

crisc2000 · 技术社区 · 9 年前

我有一个用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]

并在图片周围加上一个小边框(让我看到我已经点击了那张图片)。

谢谢

2 回复 | 直到 9 年前

1

2

AceWebDesign 9 年前

您好,使用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/

希望能有所帮助

2

1

Riddell 9 年前

这里是Pure 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]";
  });
}