从弹出窗口中使用jquery替换textarea中的img src

问题描述：

我想从弹出窗口中使用jquery替换父窗口中的textarea和输入框图像源。输入框中的文本没有任何问题，但文本框中的文本保持不变。从弹出窗口中使用jquery替换textarea中的img src

这里的父窗口中的代码：

<textarea cols="100" rows="20" class="editor"> 
    <a href="http://www.amazon.com"> 
     <img src="image.jpg" alt="replace image source in this textbox" /> 
    </a> 
</textarea> 

<input type="text" value="image.jpg" maxlength="255" MultiLine="false" Class="inputBox" style="width:875px;" /> 

<a href="/PopUpBox" class="popup">Click Here To Add An Image/s</a> 

<script type = "text/javascript"> 
    $('.popup').click(function (event) { 
     event.preventDefault(); 
     window.open($(this).attr("href"), "popupWindow", "width=750, height=800, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes"); 
    }); 
</script>

下面是弹出窗口中的代码：

<div class="selectButton"> 
<input id="select" class="selectImage" type="button" data-imagepath="image2.jpg" value="Select"> 
</div> 

<script type = "text/javascript">  
$('.selectImage').live("click", function (e) { 
     var selectImage = $(this).data("imagepath"); 
     window.opener.$(".editor img").attr("src", selectImage); // can't change img src in textarea box 
     window.opener.$(".inputBox").val(selectImage); 
     self.close(); 
     e.preventDefault(); 
    }); 
</script>

任何想法，为什么这是不工作？

答

@Vikram Deshmukh是沿着正确的路线。 @Olalekan也是正确的，textarea的内容是文本，它不能像HTML一样操作。

我张贴同样的问题在这里得到了答案：

https://forum.jquery.com/topic/replacing-img-src-in-textarea-using-jquery-from-a-pop-up-window-25-9-2014

下面是其运作的解决方案：

<script type = "text/javascript"> 
    $('.selectImage').live("click", function (e) { 
     var selectImage = $(this).data("imagepath"); 
     window.opener.$('.editor').val(function (i, value) { 
      return value.replace(/src="[^"]+"/, 'src="' + selectImage + '"'); 
     }); 
     window.opener.$(".inputBox").val(selectImage); 
     self.close(); 
     e.preventDefault(); 
    }); 
</script>

感谢您的帮助。

答

无法在textarea中获取图像源.Textarea将代码作为文本而不是元素进行响应。

您可以使用div并使其满意。

<div contenteditable="true"></div>

或者获得编辑器的值，并将其粘贴在一个div，从一个div

var editor = $(".editor").val(); 
$(".output").html(editor);

jQuery的直播功能已废弃使用“0N”

答

尝试更换textarea的选择图像如下所示更新HTML字符串的值：

<script type = "text/javascript">  
$('.selectImage').live("click", function (e) { 
     var selectImage = $(this).data("imagepath"); 
     window.opener.$(".editor img").val(
      '<a href="http://www.amazon.com">' 
      + '<img src="'+selectImage+'" alt="replace image source in this textbox" />' 
      +'</a>'); 
     window.opener.$(".inputBox").val(selectImage); 
     self.close(); 
     e.preventDefault(); 
    }); 
</script>

我将有动态内容进入文本区域，所以此解决方案将不适合。 – user2151345 2014-09-24 13:45:01

你可以搭起你正在寻找的[fiddle]（http://fiddle.net）吗？ – 2014-09-24 17:00:27

对不起，这涉及弹出窗口。我不认为jsfiddle可以与弹出窗口一起工作。 – user2151345 2014-09-26 09:18:04

答

在您的弹出窗口中，只需输入r取代这个JS代码：

<script type = "text/javascript">  
$('.selectImage').click(function (e) { 
     var selectImage = $(this).data("imagepath"); 
     window.opener.$(".editor img").attr("src", selectImage); // can't change img src in textarea box 
     window.opener.$(".inputBox").val(selectImage); 
     self.close(); 
     e.preventDefault(); 
    }); 
</script>

从弹出窗口中使用jquery替换textarea中的img src

相关推荐