備忘録：HTMLのフォームでリッチテキストエディターを実装する（trix.js）

こんにちは
MaromaroのTakaです。

今回はHTMLで
リッチテキストエディタを実装する方法について解説します。

jsプラグインの「trix.js」を使用します。

はじめに

HTMLでフォームを作成する場合にテキストエリアを設けることがありますが、
ただ文字を入力させるのではなく、リッチテキストエディタ形式でユーザー側から
リンクの挿入、太字、斜体等々の入力を出来るような仕様にする要望があるかと思います。

↓のような入力欄を追加します。

実際のDEMOは下記の公式から確認できます。

https://trix-editor.org/

プラグインのtrix.jsを使用すれば一瞬で実装することが可能です。

プラグインは下記からダウンロードできます。

ダウンロードページ

distフォルダのtrix.css、trix.jsを使用してください。

trix.jsの実装方法

trix.jsの実装方法はとても簡単です。

trix.jsのプラグインをダウンロードしましたら、下記のようにタグを設置してください。

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

設置出来ましたら、
下記のようにHTMLタグを設置してください。

<input type="hidden" value="" id="test" name="test">
<trix-editor input="test"></trix-editor>

inputタグのidとtrix-editorのタグのinputはイコールにしてください。

これでOKです。

後は自動的に入力欄が追加されます。
仕組みとしては入力欄より入力されたものが、
自動的にinputのvalueに値が入るようになっています。
※typeはhiddenにしてください

入力内容を即時確認したい場合はtypeをhiddenからtext等にすればリアルタイムで入力内容を確認出来ます。

フォーム送信後の入力内容の保持や管理画面等の編集画面で
デフォルトでリッチテキストエディタに入力されている状態を作りたい場合は
inputのvalueに値を挿入すればエディタの方に反映されます。
※inputにはHTMLタグありの文字列が入るため、タグありで入れてください。（そのまま送信されたものを入れれば問題ありません。）

余談ですが、Laravelでエディタのボタンが動かない場合は public/js/app.js を削除すれば動くようになります。
具体的なapp.jsの用途は割愛しますが、無くても問題ないものです。

以上、Takaでした。