從彈出窗口中使用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>

任何想法，爲什麼這是不工作？

來源

2014-09-24 user2151345

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

感謝您的幫助。

來源

2014-09-26 10:46:34 user2151345

無法在textarea中獲取圖像源.Textarea將代碼作爲文本而不是元素進行響應。

您可以使用div並使其滿意。

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

或者獲得編輯器的值，並將其粘貼在一個div，從一個div

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

jQuery的直播功能已廢棄使用「0N」

來源

2014-09-24 12:38:33 Olalekan

嘗試更換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>

來源

2014-09-24 12:41:32

我將有動態內容進入文本區域，所以此解決方案將不適合。 – 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>

來源

2014-09-24 12:41:51 vitorio

從彈出窗口中使用jquery替換textarea中的img src

回答

相關問題