如何檢查，所選文本是否爲粗體（contenteditable）

Question

我正在使用html內置的contenteditable功能實現自定義文本編輯器。我需要知道用戶在文本編輯器上選擇文本時是否大膽。

在這裏，我有什麼權利現在：

HTML

<button onclick="boldit()">B</button> 
<div id="editor" contenteditable="true" class="email-body"> 
    This is an <strong>editable</strong> paragraph. 
</div> 

的Javascript

function boldit(){ 
document.execCommand('bold'); 
} 

Answer 1

jQuery(function($) { 
 
    $('.embolden').click(function(){ 
 
     if(selectionIsBold()){ 
 
      alert('bold'); 
 
     } 
 
     else { 
 
      alert('not bold'); 
 
     } 
 
    }); 
 
}); 
 

 
function selectionIsBold() { 
 
    var isBold = false; 
 
    if (document.queryCommandState) { 
 
     isBold = document.queryCommandState("bold"); 
 
    } 
 
    return isBold; 
 
}

.bold { 
 
    font-weight: bold; 
 
}

<div contenteditable="true" class="textEditor">Some <span class="bold">random </span>text.</div> 
 
<a href="#" class="embolden">Is Bold Text</a> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

突出顯示文本，然後單擊鏈接。

Answer 2

的可靠的方法是遍歷父樹的getComputedStyle檢查。

我假設你已經有了選定的元素。

function isBold(_element) { 
    var element = _element; 
    while (element) { 
    var style = getComputedStyle(element).fontWeight; 
    if (Number(fontWeight) > 400 || fontWeight === 'bold' || fontWeight === 'bolder') { 
     return true; 
    } 
    element = element.parentNode; 
    } 
    return false; 
}