使用contentEditable属性创建所见即所得的富文本编辑器

WYSIWYG 编辑器非常受欢迎。您可能在某个时候也使用过一个。有很多库可帮助您设置自己的编辑器。尽管它们可以快速设置，但使用这些库也有缺点。首先，它们是臃肿的。它们中的大多数都具有您可能不会使用的花哨功能。此外，自定义这些编辑器的外观可能会让人头疼。

在本教程中，我们将构建自己的轻量级 WYSIWYG 编辑器。在本教程结束时，您将拥有一个具有基本格式化功能的编辑器，可以根据您的喜好设置样式。

让我们从介绍开始 execCommand。我们将使用这个命令来广泛地实现我们的编辑器。

文档.execCommand()

execCommand是文档对象的一个方法。它允许我们操作可编辑区域的内容。与一起使用时 contentEditable，它可以帮助我们创建富文本编辑器。有很多可用的命令，例如添加链接、选择粗体或斜体以及更改字体大小或颜色。此方法遵循以下语法：

document.execCommand(CommandName, ShowDefaultUI, ValueArgument);

CommandName 是一个字符串，它指定要执行的命令的名称。 ShowDefaultUI 是一个布尔值，指示是否应显示支持界面。此选项未完全实现，最好将其设置为 false。 ValueArgument是一个字符串，用于提供图像 URL 或foreColor. null 当命令不需要值才能生效时，此参数设置为。

我们将需要使用此方法的不同版本来实现各种功能。在接下来的几段中，我将逐一介绍它们。

没有值参数的命令

像 bold、justify、undo 和 redo 这样的命令不需要 ValueArgument. 在这种情况下，我们使用以下语法：

document.execCommand(commandName, false, null);

CommandName只是命令的名称，如 justifyCenter, justifyRight, bold等。

带有值参数的命令

和之类insertImage的命令需要第三个参数才能正常工作。对于这些命令，您需要以下语法：createLinkforeColor

document.execCommand(commandName, false, value);

对于insertImage，该值将是要插入的图像的 URL。在的情况下foreColor，它将是类似的颜色值#FF9966 或类似的名称blue。

添加块样式标签的命令

添加 html 块样式标签需要您使用 formatBlockascommandName和标签名称 as valueArgument。语法类似于：

document.execCommand('formatBlock', false, tagName);

此方法将在包含当前选择的行周围添加一个 HTML 块样式标记。它还替换了那里已经存在的任何标签。 tagName 可以是任何标题标签 ( h1- h6)， p 或 blockquote.

我在这里讨论了最常见的命令。您可以访问 Mozilla 以获取所有可用命令的列表。

创建工具栏

了解了基础知识之后，就该创建工具栏了。我将为按钮使用font Awesome 图标。您可能已经注意到，撇开一些差异不谈，所有的execCommands 都具有相似的结构。我们可以通过对工具栏按钮使用以下标记来利用这一点：

<a href="#" data -command='commandName'><i class='fa fa-icon'></i></a>

这样，每当用户单击按钮时，我们将能够根据属性execCommand的值来判断使用哪个版本。data-command这里有几个按钮供参考：

<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中检查此值后，我们将使用该方法的formatBlock版本 execCommand。同样，对于最后一个按钮，superscript建议我们需要使用 novalueArgument版本的execCommand.

创建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 为每种颜色设置了一个属性。valueArgument这将在稍后用于execCommand方法中。

第二个问题是我们不能一直显示那么多颜色，因为这会占用大量空间并导致糟糕的用户体验。使用一点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方法。它有助于编写简洁的代码并避免重复。

设置foreColorandbackColor时，我使用data-value 属性作为第三个参数。 createLink并且insertImage没有常量值url，所以我们使用提示从用户那里获取值。您可能还想执行额外的检查以确保url有效。如果command变量不满足任何if块，我们运行第一个版本的execCommand.

这就是我们所见即所得编辑器的样子。

使用contentEditable属性创建所见即所得的富文本编辑器第1张 localstorage您还可以使用我在上一篇教程中讨论的内容来实现自动保存功能。