自作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を受け取ってデータベースに格納するなり好きにすれば良い。
けっこう簡単ですね。
設置は簡単にできましたが、機能もわりと簡素ですね。
文字の色を変えられないのは少し物足りないかもしれない。
別のエディタもいずれ試してみるとして、いったんはこれでいいか。
以上です。
