contentEditable プロパティを使用して WYSIWYG エディタを作成する-htmlチュートリアル-php.cn

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

WBOY

リリース： 2023-09-08 16:33:02

オリジナル

964 人が閲覧しました

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。

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

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