さんごー日記。

映画や本やゲームの感想をゆるく記録したり、プログラミングの勉強をゆるく記録するゆるい日記です。

TrixというWYSIWYGエディタを試す。

自作WebサイトにHTMLで記事投稿する機能を追加するためにWYSIWYGエディタを導入してみようと思ったのでメモ。

 

Trixというエディタ使ってみる事にする。Basecampを作っている会社のオープンソースのようです。

Trix: A rich text editor for everyday writing

 

ドキュメントはGitHubのREADMEを見よとの事。

GitHub - basecamp/trix: A rich text editor for everyday writing

 

まずはtrix.cssとtrix.jsファイルを<head>で読み込む。

cssとjsは/distディレクトリ以下に入っているので、これをダウンロードして自分のサーバーに配置しておきましょう。

https://github.com/basecamp/trix/tree/master/dist

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

 

次にフォームにTrixを組み込みます。

<form>
<input id = "x" type = "hidden" name = "content" value="テキスト内容">
<trix-editor input = "x" ></trix-editor>
</form>

 <trix-editor>タグがエディタを表示して、更新内容をhidden要素に反映していくという仕組みのようです。

hiddenフォームのvalue属性に値を入れておけば、エディタに編集内容として反映されます。

 

フォームの設置はこれだけ。

あとは普通のフォームと同じようにサーバー側でvalueを受け取ってデータベースに格納するなり好きにすれば良い。

けっこう簡単ですね。

f:id:thirtyfive:20180716143723p:plain

 

設置は簡単にできましたが、機能もわりと簡素ですね。

文字の色を変えられないのは少し物足りないかもしれない。

別のエディタもいずれ試してみるとして、いったんはこれでいいか。

 

以上です。