如何獲取使用Document.execCommand（）執行的命令列表

Question

我正在使用Document.execCommand()來操縱<div contentEditable = true id="#TextEditor">的內容。

通過單擊按鈕，我可以對我的文本編輯器啓用粗體。我用它來實現大膽的代碼是<button id="#ApplyBold">B</button>

$('#ApplyBold').click(function() { 
    $('#TextEditor').focus(); 
    document.execCommand('bold', false, null); 
}); 

這使得大膽啓用對文本編輯器。同樣，我有斜體和下劃線按鈕。

現在，我該如何檢測由document.execCommand()命令啓用的樣式。 例如，如果我已啓用粗體和斜體，我需要一個函數，如GetAppliedStyles()，它可以返回由document.execCommand()命令啓用的應用樣式。在這種情況下，他們是大膽和強調。

function GetAppliedStyles() 
{ 
    var styles = new Array(); 
    styles = document.execCommand().aCommandName; //which returns list of styles applies 
    return styles; 
} 

Answer 1

它不符合你的想法。 execCommand('bold')是一個事件，而不是一個持續的「效果」，你可以看的 - 它增加了一個<b>或<strong>標籤在當前光標所在位置的CONTENTEDITABLE節點..

如果您需要在編輯過程中，檢查當前的造型，您需要找到當前插入位置（Get caret position in contentEditable div），然後從DOM中向上查找該位置當前包裹的標籤（例如，.closest('b')）。