从弹出窗口使用jquery替换文本区域中的img src

Replacing img src in textarea using jquery from a pop-up window

本文关键字：区域 文本 src img 替换 jquery 窗口      更新时间：2023-09-26

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

这是父窗口的代码：

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

有什么想法为什么不起作用吗？

您无法在文本区域中获取图像源。Textarea以文本而非元素的形式响应代码。

您可以使用div并使其内容可编辑。

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

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

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

jQuery live函数不赞成使用"0n"

尝试用更新的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>

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

@Vikram Deshmukh在右边@Olalekan也是正确的，文本区域的内容是文本，它不能像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>

谢谢你的帮助。

相关文章：