Trix editor 使い方 導入方法

今回は、オープンソースのWYSIWYGエディタである、Trixを導入するメモとなります。

 

Trixは、他のWYSIWYGと同様に、

簡単に自分のWebページに導入することができます。

  1. 公式のGitHubよりモジュール(trix.js、trix.css)を、ダウンロードします。
  2. ダウンロードしたモジュール(trix.js、trix.css)を、実装元のページに読み込ませます。
  3. Trixエディタを表示させるためのタグを、bodyタグ内に設定します。

以下の公式ページにdemoが用意されていますので、こちらで試すことができます。

https://trix-editor.org/

 

実装方法メモ

まず、公式の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ライセンス全文の記載等を遵守すれば、

商用利用も可能な為ありがたいです。

 


------------------------------------------ スポンサーリンク ------------------------------------------
都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 138

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る