ウィジウィグエディタのTrixを使ってみる

オープンソースのウィジウィグエディタ「Trix」を使ってみます。

対応ブラウザ

公式のドキュメント内のBuilt for the Modern Webの項目に記載がありますが、IE11やスマホにも対応しているようです。

導入

まずは簡単な設置と基本的な使い方を試してみます。
GitHubのページから必要なファイルを取得して、読み込みます。

<link rel="stylesheet" type="text/css" href="trix.css" />
<script src="trix.js"></script>

簡易に設置するのみであればJavaScriptの記述は不要で、下記タグを追加するのみで設置できます。

<trix-editor></trix-editor>

これでウィジウィグの設置ができました。
設置のデモページ

trix-editorはplaceholderの属性も設定できます。

<trix-editor placeholder="ここに入力してください"></trix-editor>

placeholderのデモページ

ウィジウィグの入力内容をinputに格納する処理も用意されています。

<input id="x" type="text" name="content">
<trix-editor input="x"></trix-editor>

inputタグのidに設定した値と同じものを、trix-editorタグのinput属性の値に設定しています。
実際に使用する場合、inputのtypeの値をtextからhiddenに変更してください。
ウィジウィグの内容をinputに反映するデモページ

既に保存されているウィジウィグのコンテンツをエディタに取り込みたい場合、上記例のinputのvalueに入れるとウィジウィグに反映されます。

<input id="x" type="text" name="content" value="<div>保存内容<strong>サンプル</strong>です</div>">
<trix-editor input="x"></trix-editor>

保存内容をウィジウィグに反映するデモページ

メソッド

Trixはドキュメントを見る限りオプションのような機能がなさそうなので、メソッドの中からいくつか処理を試してみます。
詳しくは公式のドキュメントをご確認ください。
メソッドのデモページ

イベント

イベントのデモページ

ファイルの添付

画像などの添付はウィジウィグ上部の添付ボタンまたはドラッグアンドドロップで行えますが、ファイルを保存してURLを渡す部分は自分で実装する必要があります。
公式でサンプルのコードが用意されていますが、ファイルのアップロード部分を除外してURLの設定部分のみにすると以下のようになります。

// 画像が追加された時
addEventListener('trix-attachment-add', function(event) {
  // ファイルのアップロード処理を行い、画像URLを設定する(今回は例なのでアップロード画像と関係ない画像が入る)
  event.attachment.setAttributes({
    url: 'https://cly7796.net/blog/sample/try-using-trix-of-wysiwyg-editor/cat.jpg', // imgのsrc
    href: 'https://cly7796.net/blog/sample/try-using-trix-of-wysiwyg-editor/cat.jpg' // imgを囲うaのリンク先
  });
});

ファイル添付のデモページ

ファイルの添付を受け入れたくない場合、trix-file-acceptイベントでpreventDefault()を使うことで受け入れないようにすることもできます。

// 画像の追加をキャンセルする
addEventListener('trix-file-accept', function(event) {
  event.preventDefault();
  alert('画像添付は対応していません。');
});

画像添付できないようにするデモページ

ツールバーのボタンのカスタマイズ

ツールバーのボタンを独自のものに変更といったカスタマイズは難しそうですが、使用しないボタンを非表示であればCSSで対応できそうです。
例として太字、リンク、ファイル添付、元に戻す、やり直し以外のボタンを非表示にしてみます。

/*[data-trix-button-group="text-tools"],*/
/*.trix-button--icon-bold,*/
.trix-button--icon-italic,
.trix-button--icon-strike,
/*.trix-button--icon-link,*/

[data-trix-button-group="block-tools"],
.trix-button--icon-heading-1,
.trix-button--icon-quote,
.trix-button--icon-code,
.trix-button--icon-bullet-list,
.trix-button--icon-number-list,
.trix-button--icon-decrease-nesting-level,
.trix-button--icon-increase-nesting-level

/*[data-trix-button-group="file-tools"],*/
/*.trix-button--icon-attach,*/

/*[data-trix-button-group="history-tools"],*/
/*.trix-button--icon-undo,*/
/*.trix-button--icon-redo*/
{
	display: none !important;
}

これで基本的には問題ないと思いますが、ボタンを見た目上非表示にしているだけなので、エディタ自体はタグを受け入れられる状態である点は一応注意が必要です。
ツールバーのボタンを非表示にするデモページ