không thể chỉnh sửa div backspace và xóa các vấn đề nút văn bản

Question

Có rất nhiều vấn đề với div có thể chỉnh sửa nội dung và xóa nội dung html và/hoặc nội dung không thể chỉnh sửa bên trong các div có thể chỉnh sửa.

Sử dụng một câu trả lời bởi Tim tuyệt vời Xuống đây: How to delete an HTML element inside a div with attribute contentEditable?

Sử dụng mã của Tim, toàn bộ nút văn bản bị xóa. Tôi cần điều này để làm việc giống như bất kỳ textarea nào, xóa ký tự theo ký tự và chỉ cần đảm bảo các phần tử html có thể được quay trở lại là tốt.

Tôi đã thử các sau

else if(node){ 
var index = node.length-1; 
if(index >= 0) 
node.deleteData(index,1); 
else 
this.removeChild(node); 
} 

Nhưng điều này rõ ràng sẽ không hoạt động chính xác. Nếu tôi ở cuối nội dung, mọi thứ sẽ hoạt động như mong đợi. Nhưng nếu tôi đặt con trỏ ở bất cứ nơi nào khác, nó vẫn đang xóa từ đầu.

Tôi bị mất vào thời điểm này, bất kỳ sự giúp đỡ là rất đánh giá cao

http://jsfiddle.net/mstefanko/DvhGd/1/

Answer 1

Sau khi phá vỡ Cách Google sử dụng divs contenteditable trong họ google plus dùng gắn thẻ, tôi hạ cánh trên một giải pháp hợp lý hơn nhiều. Có lẽ nó sẽ giúp người khác ra ngoài.

Sau khi thêm 1 thẻ, bạn đã có thể nhìn thấy rất nhiều sự khác biệt trong trình duyệt html để trình duyệt.

Trong Google Chrome, một khoảng trắng được thêm vào với mỗi thẻ. Thẻ nút được sử dụng. Và chrome-only contenteditable = "plaintext-only" được sử dụng.

Khi tôi Backspace không gian trong chrome, một thẻ BR sau đó được nối.

Trong Firefox, thẻ BR được thêm ngay vào thẻ đầu tiên. Không có không gian là cần thiết. Và thẻ đầu vào được sử dụng thay cho thẻ nút.

Thẻ BR là lần đột phá lớn nhất mà tôi có trong khi tìm hiểu thông tin này. Trước khi thêm điều này, có rất nhiều hành vi kỳ quặc với việc xóa các thẻ, cũng như các vấn đề tiêu điểm.

Trong IE, nhiều thay đổi thú vị hơn đã được thực hiện. Một khoảng thời gian có lỗi có thể chỉnh sửa được sử dụng cho các thẻ ở đây. Không có dấu cách hoặc thẻ BR, nhưng là một nút văn bản trống.

Với tất cả những điều đó, bạn không phải sao chép chính xác google.

Các bộ phận quan trọng:

Nếu bạn đang render HTML, thực hiện như sau ...

1.Chrome nên sử dụng thẻ nút

2. Firefox/IE nên sử dụng thẻ đầu vào

Đối với phạm vi/lựa chọn bạn thường muốn đối xử với những thứ như thẻ như một nhân vật duy nhất. Bạn có thể xây dựng điều này vào phạm vi lựa chọn/logic của bạn, nhưng hành vi của các thẻ đầu vào/nút phù hợp hơn nhiều và ít mã hơn.

IE hoạt động tốt hơn trong IE7-8 bằng khoảng thời gian. Chỉ từ quan điểm giao diện người dùng. Nhưng nếu bạn không quan tâm nếu trang web của bạn là khá trong phiên bản cũ của IE, đầu vào có hành vi chính xác trong IE cũng như firefox.

3. Chỉ Chrome, sử dụng thuộc tính contenteditable = "plaintext-only" trên div có thể chỉnh sửa của bạn.

Nếu không, rất nhiều vấn đề lạ sẽ xảy ra không chỉ khi người dùng cố dán văn bản đa dạng, mà còn khi xóa phần tử html đôi khi các kiểu có thể được chuyển đến div, tôi đã lưu ý nhiều vấn đề lạ.

4. Nếu bạn cần đặt vị trí dấu mũ ở cuối div, hãy đặt phần cuối của dải ô trước BR.

cho FireFox:

range.setEndBefore($(el).find('br')[0]);