使用的execCommand在角

Question

我的格式有這樣的代碼：

@HostListener('document:click', ['$event']) 
    onClick(targetElement) { 
    console.log(targetElement); 
    var command = 'bold'; 
    if (command == 'h1' || command == 'h2' || command == 'p') { 
     document.execCommand('formatBlock', false, command); 
    } else document.execCommand(targetElement.data('command'), false, null); 
    }); 

但是，這是行不通的。第一個if聲明將被跳過，因爲我只是想確保execCommand正在工作。

它打印出console.log，所以它進入該功能。

的HTML元素將被修改爲：

<div id='editor' contenteditable> 
    <h1>A WYSIWYG Editor.</h1> 
    <p>Change this text, or format</p> 
</div> 

如何改變選擇，對於大膽的文字？ 如何在Typescript中使用document.execCommand？

我在本節中，document.execCommand(targetElement，我應該在div通過了與ID editor在指令所以它知道那是什麼特別的按鈕應該採取行動時的感覺。

Answer 1

我想你的document對象上有data。

無論如何，你正在將$event傳入HostListener。這將使targetElement a MouseEvent而不是HTMLElement。您可以使用類型提示來預見此類錯誤。

另一方面，您正在使用data功能，我從來沒有聽說過這個功能。不在MouseEvent上，也不在HTMLElement或Document上。我的猜測是你正試圖訪問dataset？如果是這種情況，這可能適用於您：

@HostListener('document:click', ['$event.target']) 
    onClick(targetElement: Document) { 
    let command: string = 'bold'; 
    if (command === 'h1' || command === 'h2' || command === 'p') { 
     document.execCommand('formatBlock', false, command); 
    } else { 
     document.execCommand(targetElement.dataset['command'], false, null); 
    } 
}