Créez un éditeur WYSIWYG à l'aide de la propriété contentEditable

L'éditeur WYSIWYG est très populaire. Vous en avez probablement également utilisé un à un moment donné. Il existe de nombreuses bibliothèques pour vous aider à configurer votre propre éditeur. Bien qu’elles soient rapides à mettre en place, l’utilisation de ces bibliothèques présente des inconvénients. Premièrement, ils sont gonflés. La plupart d’entre eux ont des fonctionnalités sophistiquées que vous n’utiliserez probablement pas. De plus, personnaliser l’apparence de ces éditeurs peut s’avérer un véritable casse-tête.

Dans ce tutoriel, nous allons créer notre propre éditeur WYSIWYG léger. À la fin de ce didacticiel, vous disposerez d'un éditeur doté de capacités de formatage de base que vous pourrez styliser à votre guise.

Présentons execCommand d’abord. Nous utiliserons cette commande pour implémenter largement notre éditeur.

Document.execCommand()

execCommand 是文档对象的一个​​方法。它允许我们操作可编辑区域的内容。当与 contentEditable est une méthode de l'objet document. Cela nous permet de manipuler le contenu de la zone modifiable. Lorsqu'il est utilisé avec contentEditable, il nous aide à créer des éditeurs de texte enrichi. De nombreuses commandes sont disponibles, telles que l'ajout de liens, la définition des sélections sur gras ou italique et la modification de la taille ou de la couleur de la police. La méthode suit la syntaxe suivante :

document.execCommand(CommandName, ShowDefaultUI, ValueArgument);

CommandName est une chaîne spécifiant le nom de la commande à exécuter. ShowDefaultUICommandName 是一个字符串，指定要执行的命令的名称。 ShowDefaultUI 是一个布尔值，指示是否应显示支持界面。该选项尚未完全实现，最好将其设置为 false。 ValueArgument 是一个字符串，用于提供图像 URL 或 foreColor 等信息。当命令不需要值才能生效时，此参数设置为 null

est une chaîne qui fournit des informations telles qu'une URL d'image ou foreColor. Ce paramètre est défini sur null lorsque la commande ne nécessite pas de valeur pour prendre effet.

Nous devons utiliser différentes versions de cette méthode pour réaliser diverses fonctions. Dans les prochains paragraphes, je les passerai en revue un par un.

Commande sans paramètre de valeurValueArgument

. Dans ce cas nous utilisons la syntaxe suivante : CommandName 只是命令的名称，例如 justifyCenter、justifyRight、bold

document.execCommand(commandName, false, null);

Attendez.

insertImage、createLink 和 foreColorLes commandes comme

document.execCommand(commandName, false, value);

formatBlock 作为 commandName，并将标记名称用作 valueArgumentAjoutez des balises de style de bloc HTML en utilisant

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

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

<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>

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>');
}

<div class="fore-wrapper"><i class='fa fa-font'></i>
  <div class="fore-palette">
  </div>
</div>

.fore-palette,
.back-palette {
  display: none;
}

.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
  display: block;
  float: left;
  position: absolute;
}

$('.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);
  
});