Truy xuất nút cha từ vùng chọn (phạm vi) trong Gecko và Webkit

Question

Tôi đang cố thêm thuộc tính khi sử dụng trình soạn thảo wysiwyg sử dụng lệnh "createLink". Tôi nghĩ rằng nó sẽ là tầm thường để lấy lại nút được tạo ra sau khi trình duyệt thực hiện lệnh đó.

Tắt, tôi chỉ có thể lấy nút mới được tạo này trong IE. Ý tưởng nào?

Ví dụ dưới đây vấn đề (các bản ghi gỡ lỗi tại triển lãm dưới đầu ra khác nhau ở mỗi trình duyệt):

var getSelectedHTML = function() { 
    if ($.browser.msie) { 
     return this.getRange().htmlText; 
    } else { 
     var elem = this.getRange().cloneContents(); 
     return $("<p/>").append($(elem)).html(); 
    } 
}; 

var getSelection = function() { 
    if ($.browser.msie) { 
     return this.editor.selection; 
    } else { 
     return this.iframe[0].contentDocument.defaultView.getSelection(); 
    } 
}; 

var getRange = function() { 
    var s = this.getSelection(); 
    return (s.getRangeAt) ? s.getRangeAt(0) : s.createRange(); 
}; 

var getSelectedNode = function() { 
    var range = this.getRange(); 
    var parent = range.commonAncestorContainer ? range.commonAncestorContainer : 
        range.parentElement ? range.parentElement(): 
        range.item(0); 
    return parent; 
}; 


// **** INSIDE SOME EVENT HANDLER **** 

if ($.browser.msie) { 
    this.ec("createLink", true); 
} else { 
    this.ec("createLink", false, prompt("Link URL:", "http://")); 
} 

var linkNode = $(this.getSelectedNode()); 
linkNode.attr("rel", "external"); 

$.log(linkNode.get(0).tagName); 
    // Gecko: "body" 
    // IE: "a" 
    // Webkit: "undefined" 

$.log(this.getSelectedHTML()); 
    // Gecko: "<a href="http://site.com">foo</a>" 
    // IE: "<A href="http://site.com" rel=external>foo</A>" 
    // Webkit: "foo" 

$.log(this.getSelection()); 
    // Gecko: "foo" 
    // IE: [object Selection] 
    // Webkit: "foo" 

Nhờ sự giúp đỡ về vấn đề này, tôi đã lùng sục các câu hỏi liên quan về SO với không thành công!

Answer 1

Đó là một cách giải quyết hacky, nhưng nên hoạt động trừ khi ai đó tạo hai liên kết giống hệt nhau.

this.getSelection() dường như để có được giống nhau ở cả hai trình duyệt cần thiết, vì vậy:

var link=prompt('gimme link'); 

//add the thing 

var text=this.getSelection(); 

var whatYouNeed=$('a:contains("'+text+'")[href="'+link+'"'); 

Answer 2

Đây là mã tôi đã sử dụng để có được những "parentNode" của con trỏ văn bản:

var getSelectedNode = function() { 
    var node,selection; 
    if (window.getSelection) { 
     selection = getSelection(); 
     node = selection.anchorNode; 
    } 
    if (!node && document.selection) { 
     selection = document.selection 
     var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange(); 
     node = range.commonAncestorContainer ? range.commonAncestorContainer : 
       range.parentElement ? range.parentElement() : range.item(0); 
    } 
    if (node) { 
     return (node.nodeName == "#text" ? node.parentNode : node); 
    } 
}; 

Tôi đã chỉnh sửa phương pháp IE của mình để ước tính bạn. Đã thử nghiệm và làm việc IE8, FF3.6, Safari4, Chrome5. Tôi đã thiết lập một số jsbin preview mà bạn có thể thử nghiệm.

Answer 3

Tôi nhận thấy rằng lựa chọn có thể phức tạp và lỗi trên các trình duyệt. Vứt bỏ sự kỳ diệu của việc chỉnh sửa tài liệu trình duyệt và nó trở nên tồi tệ hơn!

Tôi đã xem cách TinyMCE triển khai những gì tôi đang cố gắng thực hiện và thực hiện cùng một cách tiếp cận để sửa đổi jHtmlArea.

Về cơ bản, liên kết được tạo bằng href giả. Sau đó, nó tìm thấy phần tử dom bằng cách tìm kiếm các liên kết với href cụ thể đó. Sau đó, bạn có thể thêm bất kỳ thuộc tính mong muốn nào và cập nhật href bằng url thực.

solution above by gnarf là ví dụ tuyệt vời về việc nhận nút được chọn và sẽ hoạt động đối với hầu hết các trường hợp.

Dưới đây là mã cho công việc của tôi xung quanh:

var url = prompt("Link URL:", "http://"); 

if (!url) { 
    return; 
} 

// Create a link, with a magic temp href 
this.ec("createLink", false, "#temp_url#"); 

// Find the link in the editor using the magic temp href 
var linkNode = $(this.editor.body).find("a[href='#temp_url#']"); 

linkNode.attr("rel", "external"); 

// Apply the actual desired url 
linkNode.attr("href", url);