サイト制作に関するメモ書き

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

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

getDocument() Trixエディタのフォーマットされたコンテンツを取得。
getSelectedRange() エディタの現在の選択位置を取得。
setSelectedRange([start, end]) エディタの選択位置を設定。
moveCursorInDirection(direction) カーソルを前後に移動。
forward: 前方に移動。
backward後方に移動。
expandSelectionInDirection(direction) 選択範囲を前後に移動。
forward: 前方に移動。
backward後方に移動。
insertString(text) プレーンテキストを追加。
insertHTML(html) HTMLを追加。
insertLineBreak() 開業を追加。
deleteInDirection(direction) テキストを削除。
forward: 前方の文字を削除。
backward後方の文字を削除。
activateAttribute(style) 現在の選択範囲にタグを設定。
bold: strong
italic: em
href: a(第2引数にURLを指定。)
strike: del
heading1: h1
quote: blockquote
code: pre
bullet: ul, li
number: ol, li
deactivateAttribute(style) 現在の選択範囲のタグを除去。
increaseNestingLevel() ネストを増やす。
decreaseNestingLevel() ネストを減らす。
undo() 履歴のひとつ前に戻す。
redo() 履歴のひとつ先に進む。

イベント

イベントのデモページ

trix-initialize ウィジウィグの準備が完了した時に発火。
trix-change エディタの内容が変更された時に発火。
trix-selection-change 選択範囲が変更された時に発火。
trix-focus エディタのフォーカスが当たった時に発火。
trix-blur エディタからフォーカスが外れた時に発火。
trix-file-accept ファイルがエディタに挿入された時に発火。
trix-attachment-add Trixのドキュメントにファイルが追加された後に発火。
trix-attachment-remove Trixのドキュメントからファイルが削除された時に発火。

ファイルの添付

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

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

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

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP