TinyMCE和圖像裁剪

Question

我正在爲TinyMCE編寫一個插件來裁剪圖像。此代碼適用於Firefox，但似乎不適用於其他瀏覽器。

基本上，我使用JCrop獲取圖像和選定區域的座標，並將其傳遞給服務器端的方法，該方法進行裁剪並返回更新的寬度，高度和圖像src。

之後，找回結果。我更新圖像尺寸和src如下。

tinyMCE.activeEditor.selection.getNode().src = croppedImageSource; 
tinyMCE.activeEditor.selection.getNode().width = croppedImageWidth; 
tinyMCE.activeEditor.selection.getNode().height = croppedImageHeight; 

服務器端方法和作物座標按預期工作。而上面的代碼運行不正常。適用於Firefox，但不適用於其他瀏覽器。

我想知道是否正確更新TinyMCE中選擇的圖像？

這裏是我的全部javascript函數

function cropAndSave() 
{ 
    var imgSrc = document.getElementById('jcrop_target').src; 

    if(checkJcropCoords()) 
    { 
     $.ajax({ 
      async: false, 
      url: "/DocViewImageCrop.page", 
      type: 'POST', 
      data: 
      { 
       imgData: imgSrc, 
       cW:   $("#w").val(), 
       cH:   $("#h").val(), 
       cX:   $("#x").val(), 
       cY:   $("#y").val() 
      }, 
      dataType: 'json', 
      complete: function(xmlRequestObject, successString) 
      { 
       var fileExists = xmlRequestObject.responseXML.getElementsByTagName("fileExists")[0].firstChild.nodeValue; 

       if(fileExists == undefined || fileExists == "false") 
       { 
        alert('Image not found on server. Try uploading the image, before attempting to resize'); 
       } 
       else 
       { 
        tinyMCE.activeEditor.selection.getNode().src = xmlRequestObject.responseXML.getElementsByTagName("imgsrc")[0].firstChild.nodeValue; 
        tinyMCE.activeEditor.selection.getNode().width = xmlRequestObject.responseXML.getElementsByTagName("width")[0].firstChild.nodeValue; 
        tinyMCE.activeEditor.selection.getNode().height = xmlRequestObject.responseXML.getElementsByTagName("height")[0].firstChild.nodeValue; 
       } 
      } 
     }); 
    } 
} 

Answer 1

您可以嘗試

tinyMCE.activeEditor.selection.getNode().setAttribute('scr', croppedImageSource); 
tinyMCE.activeEditor.selection.getNode().setAttribute('width', croppedImageWidth); 
tinyMCE.activeEditor.selection.getNode().setAttribute('height', croppedImageHeight); 

或jQuery的

var $node = $(tinyMCE.activeEditor.selection.getNode()); 
$node.attr('scr', croppedImageSource); 
$node.attr('width', croppedImageWidth); 
$node.attr('height', croppedImageHeight);