所見即所得編輯器非常受歡迎。您可能也曾在某個時候使用過其中之一。有很多庫可以幫助您設置自己的編輯器。盡管它們設置起來很快，但使用這些庫也有缺點。首先，它們很臃腫。其中大多數都有您可能不會使用的奇特功能。此外，自定義這些編輯器的外觀可能會很令人頭疼。
在本教程中，我們將構建我們自己的輕量級所見即所得編輯器。在本教程結束時，您將擁有一個具有基本格式化功能的編輯器，并且可以根據您的喜好設置樣式。
我們首先介紹execCommand。我們將使用此命令來廣泛地實現我們的編輯器。
Document.execCommand()
execCommand 是文檔對象的一個??方法。它允許我們操作可編輯區域的內容。當與 contentEditable 一起使用時，它可以幫助我們創建富文本編輯器。有很多命令可用，例如添加鏈接、將選擇設置為粗體或斜體以及更改字體大小或顏色。該方法遵循以下語法：
document.execCommand(CommandName, ShowDefaultUI, ValueArgument);
登錄后復制
CommandName?是一個字符串，指定要執行的命令的名稱。 ShowDefaultUI?是一個布爾值，指示是否應顯示支持界面。該選項尚未完全實現，最好將其設置為 false。 ValueArgument 是一個字符串，用于提供圖像 URL 或 foreColor 等信息。當命令不需要值才能生效時，此參數設置為 null。
我們需要使用此方法的不同版本來實現各種功能。在接下來的幾段中，我將一一回顧它們。
沒有值參數的命令
粗體、對齊、撤消和重做等命令不需要 ValueArgument。在這種情況下，我們使用以下語法：
document.execCommand(commandName, false, null);
登錄后復制
CommandName 只是命令的名稱，例如 justifyCenter、justifyRight、bold 等.?
帶有值參數的命令
像 insertImage、createLink 和 foreColor 這樣的命令需要第三個參數才能正常工作。對于這些命令，您需要以下語法：
document.execCommand(commandName, false, value);
登錄后復制
對于 insertImage，該值是要插入的圖像的 URL。對于 foreColor，它將是類似 #FF9966 的顏色值或類似 blue 的名稱。
添加塊樣式標簽的命令
添加 HTML 塊樣式標記需要使用 formatBlock 作為 commandName，并將標記名稱用作 valueArgument。語法類似于：
document.execCommand('formatBlock', false, tagName);
登錄后復制
此方法將在包含當前選擇的行周圍添加 HTML 塊樣式標記。它還會替換那里已經存在的任何標簽。 tagName 可以是任何標題標記 (h1–h6)、p 或 blockquote。
我在這里討論了最常用的命令。您可以訪問 Mozilla 以獲取所有可用命令的列表。
創建工具欄
基礎知識完成后，是時候創建工具欄了。我將使用 Font Awesome 圖標作為按鈕。您可能已經注意到，除了一些差異外，所有 execCommand 都具有相似的結構。我們可以通過對工具欄按鈕使用以下標記來利用這一點：
<a href="#" data-command='commandName'><i class='fa fa-icon'></i></a>
登錄后復制
這樣，每當用戶單擊按鈕時，我們就能夠根據 data-command 屬性的值來判斷要使用哪個版本的 execCommand 。以下是幾個按鈕供參考：
<a href="#" data-command='h2'>H2</a> <a href="#" data-command='undo'><i class='fa fa-undo'></i></a> <a href="#" data-command='createlink'><i class='fa fa-link'></i></a> <a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a> <a href="#" data-command='superscript'><i class='fa fa-superscript'></i></a>
登錄后復制
第一個按鈕的 data-command 屬性值為 h2。在 JavaScript 中檢查此值后，我們將使用 execCommand 方法的 formatBlock 版本。同樣，對于最后一個按鈕，superscript 建議我們使用 execCommand 的無 valueArgument 版本。
創建 foreColor 和 backColor 按鈕是另一回事。它們帶來了兩個問題。根據我們提供給用戶選擇的顏色數量，編寫這么多代碼可能會很煩人并且容易出錯。為了解決這個問題，我們可以使用以下 JavaScript 代碼：
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66','CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF'];
var forePalette = $('.fore-palette');
for (var i = 0; i < colorPalette.length; i++) {
forePalette.append('<a href="#" data-command="forecolor" data-value="' + '#' + colorPalette[i] + '" style="background-color:' + '#' + colorPalette[i] + ';" class="palette-item"></a>');
}
登錄后復制
請注意，我還為每種顏色設置了一個 data-value 屬性。稍后它將在 execCommand 方法中用作 valueArgument。
第二個問題是我們不能一直顯示那么多顏色，因為這會占用大量空間并導致糟糕的用戶體驗。使用一點CSS，我們可以確保只有當用戶將鼠標懸停在相應按鈕上時才會出現調色板。這些按鈕的標記也需要更改為以下內容：
<div class="fore-wrapper"><i class='fa fa-font'></i> <div class="fore-palette"> </div> </div>
登錄后復制
要僅在 hover 上顯示調色板，我們需要以下 CSS：
.fore-palette,
.back-palette {
display: none;
}
.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
display: block;
float: left;
position: absolute;
}
登錄后復制
CodePen 演示中還有許多其他 CSS 規則可以使工具欄更漂亮，但這就是核心功能所需的全部。
向編輯器添加功能
現在，是時候讓我們的編輯器發揮作用了。這樣做所需的代碼非常小。
$('.toolbar a').click(function(e) {
var command = $(this).data('command');
if (command == 'h1' || command == 'h2' || command == 'p') {
document.execCommand('formatBlock', false, command);
}
if (command == 'forecolor' || command == 'backcolor') {
document.execCommand($(this).data('command'), false, $(this).data('value'));
}
if (command == 'createlink' || command == 'insertimage') {
url = prompt('Enter the link here: ','http:\/\/');
document.execCommand($(this).data('command'), false, url);
}
else document.execCommand($(this).data('command'), false, null);
});
登錄后復制
我們首先將單擊事件附加到所有工具欄按鈕。每當單擊工具欄按鈕時，我們都會將相應按鈕的 data-command 屬性的值存儲在變量 command 中。稍后將用于調用 execCommand 方法的適當版本。它有助于編寫簡潔的代碼并避免重復。
設置 foreColor 和 backColor 時，我使用 data-value?屬性作為第三個參數。 createLink 和 insertImage 沒有常量 url 值，因此我們使用提示從用戶獲取值。您可能還想執行其他檢查以確保 url 有效。如果command變量不滿足任何if塊，我們運行第一個版本的execCommand。
這就是我們所見即所得編輯器的樣子。
您還可以使用我在上次討論的 localStorage 來實現自動保存功能教程。
跨瀏覽器差異
各種瀏覽器在實現上存在細微差異。例如，請記住，使用 formatBlock 時，Internet Explorer 僅支持標題標簽 h1 - h6、address 和 pre。在指定 commandName 時，您還需要包含標記分隔符，例如
。
并非所有瀏覽器都支持所有命令。 Internet Explorer 不支持 insertHTML 和 hiliteColor 等命令。同樣，只有 Firefox 支持 insertBrOnReturn。您可以在此 GitHub 頁面上了解有關瀏覽器不一致的更多信息。
最終想法
創建您自己的所見即所得編輯器可以是一次很好的學習體驗。在本教程中，我介紹了很多命令并使用了一些 CSS 來進行基本樣式設置。作為練習，我建議您嘗試實現一個工具欄按鈕來設置文本選擇的 font。該實現與 foreColor 按鈕的實現類似。
我希望您喜歡本教程并學到一些新東西。如果您從頭開始創建了自己的所見即所得編輯器，請隨時在評論部分鏈接到它。
以上就是使用contentEditable屬性創建一個所見即所得（WYSIWYG）編輯器的詳細內容，更多請關注www.92cms.cn其它相關文章！
