2010-09-22 37 views
18

Tôi có một số contenteditable div và một vài đoạn trong đó.Chọn phạm vi trong div có thể chỉnh sửa nội dung

Dưới đây là mã của tôi:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    </head> 
    <body> 
     <div id="main" contenteditable="true" 
      style="border:solid 1px black; width:300px; height:300px"> 
      <div>Hello world!</div> 
      <div> 
       <br> 
      </div> 
      <div>This is a paragraph</div> 
     </div> 
    </body> 
</html> 

Giả sử, tôi muốn thực hiện một lựa chọn phạm vi mà sẽ chứa chuỗi "! Thế giới này là"

Làm thế nào để làm điều đó?

Trả lời

36

Khi bạn đã giữ các nút văn bản chứa văn bản bạn muốn được đánh dấu, thật dễ dàng. Làm thế nào bạn có được những phụ thuộc vào cách chung chung bạn cần này được. Vì hiện tại, trước khi người dùng chỉnh sửa, những điều sau đây sẽ hoạt động:

var mainDiv = document.getElementById("main"); 
var startNode = mainDiv.firstChild.firstChild; 
var endNode = mainDiv.childNodes[2].firstChild; 

var range = document.createRange(); 
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world" 
range.setEnd(endNode, 7); // 7 is the length of "this is" 
var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range); 
+0

'removeAllRanges' và sau đó' addRange' là các phần tôi bị thiếu trong trường hợp của tôi. Cảm ơn mã! – siannopollo

Các vấn đề liên quan