リッチテキストエディタTrixの使い方と送信方法
以前、Quillの設置方法を記事にしたよ
ところがQuillは使っていて不具合が多くて、正直対処に疲れたのでTrixに移行することにしたよ
エディターの動きもなんか不安定だったしね
というわけで今回は、そのTrixの紹介と使いかたを説明しますね
Trix
![](https://blog.4breaker.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-21-17.36.47.png)
TrixはBaseCampが開発したWYSIWYGベースのリッチテキストエディタです
シンプルなUIが特徴で、地味に動きも良いんだよね
使い方
導入
Githubからソースをダウンロード
解凍するとdistフォルダ内に以下のファイルが見つかります
- trix.js
- trix.css
2つのファイルを読み込みます
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);
});
ディスカッション
コメント一覧
まだ、コメントがありません
新たにPostされたDocs
: ツール関連
キーボードを銀軸から赤軸に買い替えた話
約3年半前、仕事で使うキーボードとしてARCHISS ProgresTouchの ...: スマホ
楽天モバイルがおすすめできない人の特徴とは?
楽天モバイルの最強プランをおすすめできない人の特徴を簡単にまとめてみました また ...: システム開発
なぜスクラムがつらいのか?開発現場が疲弊するのか?スクラムに対する違和感と共に原因を考えてみた
今ではどこの開発現場に行っても、やれスクラムスクラムと、まるでスクラムでもやって ...: Laravel
1つのテーブルを複数のテーブルと結合したい【Laravel10】
1つのテーブルを2つの異なるテーブルに対して結合したいケースがあったのでLara ...: Laravel
Laravelで複数画像アップロード時のvalidateを指定【Laravel10】
jQuery - Image Uploaderを使って、フォームから複数の画像を ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities