今回は、オープンソースのWYSIWYGエディタである、Trixを導入するメモとなります。
Trixは、他のWYSIWYGと同様に、
簡単に自分のWebページに導入することができます。
- 公式のGitHubよりモジュール(trix.js、trix.css)を、ダウンロードします。
- ダウンロードしたモジュール(trix.js、trix.css)を、実装元のページに読み込ませます。
- Trixエディタを表示させるためのタグを、bodyタグ内に設定します。
以下の公式ページにdemoが用意されていますので、こちらで試すことができます。
実装方法メモ
まず、公式のGitHubよりモジュールをダウンロードします。
公式ページDemoの左側に、Githubリポジトリのリンクが存在します。
https://github.com/basecamp/trix
Codeの部分からダウンロードを行います。
動作に必要なファイルは、以下のファイルです。
・trix.js
・trix.css
※古いブラウザへの対応を行う場合には、trix.jsの代わりにtrix-core.jsを読み込ませるようです。
ダウンロードしたら公式ページの説明通り、
実装元のHTMLファイルに、headタグ内で指定して読み込ませます。
<head> <link rel="stylesheet" type="text/css" href="trix.css"> <script type="text/javascript" src="trix.js"></script> </head>
最後に、Trixエディタを表示させるためのタグを、bodyタグ内に設定します。
<form> <input id="X" type="hidden" name="content"> <trix-editor input="X"></trix-editor> </form>
trix-editorタグのinput属性の内容を、inputタグidに割り当てる必要があります。
(Xの部分は共通である必要があります)
以上で、簡易的に動作させる実装は完了となります。
<html>
<head>
<title>Trix Editor テスト</title>
<link rel="stylesheet" type="text/css" href="trix.css">
<script type="text/javascript" src="trix.js"></script>
</head>
<body>
<h1>Trix Editor テスト</h1>
<form>
<input id="x" type="hidden" name="content">
<trix-editor input="x"></trix-editor>
</form>
</body>
</html>
ブラウザでページを表示させると、
操作ボタン等が入力フォームの上に表示されます。
特にスクリプト等を追記しなくても、各ボタンも動作します。
入力内容は、trix-editorのinput属性と紐づくinputタグのvalueに格納されます。
強調表示等を行う場合、対応するタグが含まれた状態でvalueがセットされます。
今回のメモ内容は以上となります。
Trixは、Basecamp社製であり、MIT Licenseで公開されています。
著作権表示、MITライセンス全文の記載等を遵守すれば、
商用利用も可能な為ありがたいです。
