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

用于将html转换为bbcode的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]";
      });
    }