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