Dòng mới và có thể chỉnh sửa được bằng các thẻ lồng nhau không thể chỉnh sửa

Question

Tôi có một trường hợp lẻ cho các phần tử contenteditable trong HTML. Chúng tôi có một trình soạn thảo văn bản phong phú mà khách hàng tải các mẫu được tạo sẵn (bởi chúng tôi) vào, và sau đó có thể sửa đổi mẫu đó tuy nhiên họ muốn (chủ yếu).

Các phần của mẫu của chúng tôi đã được đánh dấu là không thể chỉnh sửa trực tiếp, nhưng vẫn có thể bị xóa, v.v. Tuy nhiên, dường như có vấn đề khi một phần tử đó là phần tử đầu tiên trên một dòng (ngay sau thẻ <br/>) và người dùng truy cập DEL trên dòng ở trên. Vì số contenteditable=false của mình, trình duyệt dường như không xóa <br/> nhưng toàn bộ khoảng không thể chỉnh sửa được.

HTML mẫu là như thế này

<div contenteditable=true> 
    <span>blah blah blah</span><br/> 
    <span contenteditable="false">You cant edit this value directly</span> 
</div> 

Nếu người dùng đặt con trỏ của họ sau khi blah blah blah, và truy cập DEL toàn có thể chỉnh sửa nội dung tiếp theo sẽ bị xóa, chứ không phải là ngắt dòng.

Có cách nào, javascript hoặc cách khác, để khắc phục hành vi này không?

Tôi bị lừa xung quanh với việc cố gắng phát hiện vị trí con trỏ (sử dụng khoảng trống) và chèn khoảng trắng tạm thời, v.v., nhưng dường như tôi không thể thực hiện hành vi mong muốn, mà chỉ là thẻ không thể chỉnh sửa được mang lên đến dòng trước đó.

Chúng tôi đã giới hạn việc sử dụng trình chỉnh sửa cho Chrome chỉ, vì vậy không cần phải lo lắng về IE hoặc FF.

jsfiddle of an example

Answer 1

Hãy mỗi khoảng contenteditable, sau đó người dùng sẽ không thể xóa span bạn không muốn thay đổi nội dung, và thoát khỏi div là có thể chỉnh sửa.

Dưới đây là phiên bản của tôi về JSFiddle: http://jsfiddle.net/howderek/HgRsF/2/

Answer 2

Câu hỏi đặt ra là từ năm 2012, và kể từ đó vấn đề này đã được cố định và lồng contenteditable thẻ làm việc như dự định. Vẫn còn một số vấn đề như this bug, nhưng về tổng thể, tính năng này có thể sử dụng được.