ContentEditable - Nhận màu/kích thước phông chữ hiện tại

Question

Tôi đang làm việc trên Trình chỉnh sửa văn bản đa dạng cho trình duyệt web và tôi muốn làm việc với các giá trị màu và kích thước phông chữ hiện tại trong phần tử RTE/ContentEditable. Có một số chức năng được chọn trước để nhận các giá trị này, như execCommand, được kết nối trực tiếp với phần tử ContentEditable không? Hoặc tôi nên sử dụng một số thư viện jQuery phạm vi văn bản mà sẽ nhận được các thuộc tính này?

Answer 1

Bạn có thể sử dụng document.queryCommandValue() để có được màu sắc và kích thước phông chữ của vùng chọn hiện tại trong tất cả các trình duyệt chính:

Live Demo: http://jsfiddle.net/timdown/AJBsY/

Code:

var colour = document.queryCommandValue("ForeColor"); 
var fontSize = document.queryCommandValue("FontSize"); 

Tuy nhiên, kết quả là không nhất quán giữa các trình duyệt và lệnh FontSize chỉ hoạt động với các kích thước phông chữ 1-7 được sử dụng trong phần tử HTML <font> thay vì CSS, vì vậy, bạn nên ngừng giữ phần tử ntaining việc lựa chọn và kiểm tra các thuộc tính CSS của nó sử dụng window.getComputedStyle()/currentStyle:

Live Demo: http://jsfiddle.net/timdown/K4n2j/

Code:

function getComputedStyleProperty(el, propName) { 
    if (window.getComputedStyle) { 
     return window.getComputedStyle(el, null)[propName]; 
    } else if (el.currentStyle) { 
     return el.currentStyle[propName]; 
    } 
} 

function reportColourAndFontSize() { 
    var containerEl, sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      containerEl = sel.getRangeAt(0).commonAncestorContainer; 
      // Make sure we have an element rather than a text node 
      if (containerEl.nodeType == 3) { 
       containerEl = containerEl.parentNode; 
      } 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     containerEl = sel.createRange().parentElement(); 
    } 

    if (containerEl) { 
     var fontSize = getComputedStyleProperty(containerEl, "fontSize"); 
     var colour = getComputedStyleProperty(containerEl, "color"); 
     alert("Colour: " + colour + ", font size: " + fontSize); 
    } 
} 

Đây là một sự cải tiến, nhưng vẫn còn những mâu thuẫn trình duyệt như các đơn vị khác nhau hoặc định dạng màu.