リッチテキストエディタTrixの使い方と送信方法

ツール関連

以前、Quillの設置方法を記事にしたよ

ところがQuillは使っていて不具合が多くて、正直対処に疲れたのでTrixに移行することにしたよ

エディターの動きもなんか不安定だったしね

というわけで今回は、そのTrixの紹介と使いかたを説明しますね

Trix

TrixはBaseCampが開発したWYSIWYGベースのリッチテキストエディタです

シンプルなUIが特徴で、地味に動きも良いんだよね

使い方

導入

Githubからソースをダウンロード

解凍するとdistフォルダ内に以下のファイルが見つかります

  • trix.js
  • trix.css

２つのファイルを読み込みます

HTML

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

エディターの設置

エディターを設置したいフォーム内に、以下のコードを貼り付けます

HTML

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

以上

Javascriptの初期化もいらない

チョー簡単♩

フォームからの送信が想定されてる

Quillとの一番の違い、Trixはフォームからの送信が想定されて設計されてるってこと

しかもやり方が結構丁寧にドキュメントに書いてあります

例えば、上にも書いてあるこのHTML

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

trix-editor内に表示したエディターの内容を、自動的にhiddenフィールドにコピーしてくれます

だから特にJavascriptのコードを書かなくてもこれだけでフォームから送信できるんです

あとはサーバー側（PHP）で、値(content)を受け取るだけ

やるじゃん、trix

保存したテキストの表示方法

ドキュメントにはさらに、データベースなんかに保存したテキストの表示方法も書いてあります

やり方はこう

<div class="trix-content">保存したでーたあを表示</div>

表示する個所でHtmlにtrix-contentクラスを指定

Quillはこういう内容がドキュメントに書いてなかったので、いちいち探す必要があったけどTrixはちゃんと書いててくれてます

プレビュー機能の実装方法

ユーザが入力したテキストを、リアルタイムに確認できるプレビュー機能の実装方法

デモ

入力欄の下にプレビューエリアがある例

実装

プレビューエリア

まずはHTML側に、プレビューエリアを設置

ユーザが入力したテキストは、このプレビューエリア内に表示されます

<div id="preview-area"></div>

エディターから内容をコピー

このプレビューエリアにユーザの入力を表示する大まかなやり方としては、

ユーザがtrixエディターに入力

↓

チェンジイベント（trix-change）が発火

↓

内容をプレビューエリアにコピー

となります

// Trixエディターのelementを取得
var element = document.querySelector("trix-editor");
　
document.addEventListener('trix-change', function (e) {
　
    // 入力内容をHTMLで取得
    var html = element.innerHTML;
　
    // プレビューエリアにコピー
    $("#preview-area").html(html);
　
});