contentEditable プロパティを使用して WYSIWYG エディタを作成する

WYSIWYG エディタは非常に人気があります。おそらくあなたも、これらのいずれかを一度は使用したことがあるでしょう。独自のエディターのセットアップに役立つライブラリが多数あります。これらのライブラリはセットアップが簡単ですが、使用には欠点があります。まず、肥大化します。それらのほとんどには、おそらく使用しないであろう派手な機能が付いています。さらに、これらのエディタの外観をカスタマイズするのは頭の痛い問題になる場合があります。

このチュートリアルでは、独自の軽量 WYSIWYG エディターを構築します。このチュートリアルを終えると、好みに合わせてスタイルを設定できる基本的な書式設定機能を備えたエディターが完成します。

最初に execCommand を紹介します。このコマンドを使用してエディタを広範囲に実装します。

Document.execCommand()

execCommand は、ドキュメント オブジェクトのメソッドです。これにより、編集可能領域の内容を操作できるようになります。 contentEditable と併用すると、リッチ テキスト エディターの作成に役立ちます。リンクの追加、Bold または Italic への選択の設定、フォント サイズや色の変更など、多くのコマンドが使用できます。このメソッドは次の構文に従います:

リーリー

CommandName は、実行するコマンドの名前を指定する文字列です。 ShowDefaultUI は、サポート インターフェイスを表示するかどうかを示すブール値です。このオプションはまだ完全には実装されていないため、false に設定するのが最適です。 ValueArgument は、画像 URL や foreColor などの情報を提供する文字列です。コマンドが値を有効にする必要がない場合、このパラメータは null に設定されます。

さまざまな機能を実現するには、このメソッドのさまざまなバージョンを使用する必要があります。次の数段落で、それらを 1 つずつ確認していきます。

値パラメータのないコマンド

bold、align、undo、redo などのコマンドには、ValueArgument は必要ありません。この場合、次の構文を使用します:

リーリー

CommandName は、justifyCenter、justifyRight、bold などの単なるコマンドの名前です。

値パラメータを含むコマンド

insertImage

、createLink、foreColor などのコマンドが正しく動作するには、3 番目の引数が必要です。これらのコマンドには、次の構文が必要です: リーリー

insertImage

の場合、値は挿入される画像の URL です。 foreColor の場合、#FF9966 のような色の値、または blue のような名前になります。 ブロックスタイルタグを追加するコマンド

HTML ブロック スタイル タグを追加するには、

formatBlock

を commandName として使用し、タグ名を valueArgument として使用する必要があります。構文は次のようになります: リーリー このメソッドは、現在の選択範囲を含む行の周囲に HTML ブロック スタイルのタグを追加します。すでに存在するタグも置き換えられます。

tagName

には、任意のタイトル タグ (h1-h6)、p、または blockquote を指定できます。 ここでは最も一般的に使用されるコマンドについて説明しました。使用可能なすべてのコマンドのリストについては、Mozilla にアクセスしてください。

ツールバーの作成

基本的な作業が完了したら、ツールバーを作成します。ボタンには Font Awesome アイコンを使用します。お気づきかもしれませんが、いくつかの違いを除けば、すべての

execCommand

は同様の構造を持っています。ツールバー ボタンに次のマークアップを使用することで、これを利用できます。 リーリー これにより、ユーザーがボタンをクリックするたびに、data-command

属性の値に基づいて、使用する

execCommand のバージョンを決定できます。参考用のボタンをいくつか示します: リーリー

最初のボタンの

data-command

属性値は

h2 です。 JavaScript でこの値を確認した後、execCommand メソッドの formatBlock バージョンを使用します。同様に、最後のボタンについては、superscript では、valueArgument を含まない execCommand バージョンを使用することを推奨しています。 foreColor

ボタンと

backColor ボタンの作成は別の話です。それらは 2 つの問題を引き起こします。ユーザーが選択できる色の数によっては、非常に多くのコードを記述するのは煩わしく、エラーが発生しやすい可能性があります。この問題を解決するには、次の 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 时，您还需要包含标记分隔符，例如 <h3></h3>。

并非所有浏览器都支持所有命令。 Internet Explorer 不支持 insertHTML 和 hiliteColor 等命令。同样，只有 Firefox 支持 insertBrOnReturn。您可以在此 GitHub 页面上了解有关浏览器不一致的更多信息。

最终想法

创建您自己的所见即所得编辑器可以是一次很好的学习体验。在本教程中，我介绍了很多命令并使用了一些 CSS 来进行基本样式设置。作为练习，我建议您尝试实现一个工具栏按钮来设置文本选择的 font。该实现与 foreColor 按钮的实现类似。

我希望您喜欢本教程并学到一些新东西。如果您从头开始创建了自己的所见即所得编辑器，请随时在评论部分链接到它。

以上がcontentEditable プロパティを使用して WYSIWYG エディタを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。