Question

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

以下是父窗口的代码：

<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>

为什么这不起作用？

Answer 1

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

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

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

或者获取编辑器的值并将其粘贴到div中，从div中选择图像

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

不推荐使用jQuery live function＆＃34; 0n＆＃34;

Answer 2

尝试使用更新的HTML字符串替换textarea值，如下所示：

<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>

Answer 3

在弹出窗口中，只需替换此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>

Answer 4

@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>

感谢您的帮助。

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

4 个答案: