Rails6から採用されたAction Text。
TrixエディタをベースにしたWYSIWYGエディタの一種で、書式設定やリンク貼り付け、画像挿入などができて非常に便利です。
ただし、デフォルトのままだと挿入されるタグに癖があるので簡単に調整して使いやすいようにしましょう。
Action Textによって挿入されるタグを調整する基本的な方法
エディタの各ボタンで挿入されるタグは、JavaScriptによって変更します。
例えば、デフォルトで1段落は<div>タグで囲われていますが、使いやすいように<p>タグに変更するには下記の通り。
var Trix = require("trix")
require("@rails/actiontext")
Trix.config.blockAttributes.default = {
tagName: "p",
breakOnReturn: true
}基本的には各ボタンは下記のどちらかによってコントロールされています。
Trix.config.blockAttributesTrix.config.textAttributes
変更したいボタンがどちらにあるか確認して調整していきましょう。
ただし、必ず最初に下記コードにて読み込んだあとに各種設定を書いていく必要があるので注意してくださいね。
var Trix = require("trix")
require("@rails/actiontext")ActionTextで出力されるブロック系要素のタグを変更する方法
- 段落
- 見出し
- code埋め込み
- リスト形式
- ファイル添付
といったブロック系要素を設定する方法をまとめます。
Action Textが出力する段落タグの変更
デフォルトでは段落は<div>タグで出力されます。
通常なら<p>タグで欲しいところですよね。
変更するには下記のコードで行います。
Trix.config.blockAttributes.default = {
tagName: "p",
breakOnReturn: true
}tagNameで利用するタグを<p>タグに設定し、入力中にEnterを押すことで新しい段落に切り替えるように設定しています。
Action Textが出力する引用タグの変更
デフォルト設定では、引用タグには<blockquote>が利用されます。
もしその他のタグに変更したい場合は、下記のtagName欄を変更して記述すればOK。
Trix.config.blockAttributes.quote = {
tagName: "blockquote"
}Action Textが出力する見出しタグの変更
デフォルトでは<h1>タグが振られています。
記事内に入れる見出しなので、<h2>にするケースが多いのではないでしょうか。
その場合は下記コードでOK。
Trix.config.blockAttributes.heading1 = {
tagName: "h2"
}Action Textが出力するコード埋め込みタグの変更
エディタ内に記入したコードをそのまま表示させる段落では、デフォルトで<pre>タグがあたっています。
あまり変更することはないと思いますが、変更するときは下記tagNameの部分を変更すればOK。
Trix.config.blockAttributes.code = {
tagName: "pre"
}Action Textが出力するリスト系タグの変更
箇条書きなどのリスト系タグも変更できます。
デフォルトでは<ul>や<ol>タグがブロック全体に使われ、各項目は<li>タグが利用されているものです。
箇条書きのリストを変更する場合は下記。
Trix.config.blockAttributes.bulletList = {
tagName: "ul"
}
Trix.config.blockAttributes.bullet = {
tagName: "li"
}番号付きのリストの場合は以下。
Trix.config.blockAttributes.numberList = {
tagName: "ol"
}
Trix.config.blockAttributes.number = {
tagName: "li"
}Action Textが出力するファイル添付系タグの変更
ファイルを埋め込むとき、Action Textはデフォルトで<div>タグで要素を囲います。
変更したい場合は、以下のtagNameのところを変更すればOKです。
Trix.config.blockAttributes.attachmentGallery = {
tagName: "div"
}ActionTextで出力されるテキスト装飾系要素のタグを変更する方法
ブロック系タグと同様、下記のようなテキスト装飾系も利用するタグを変更することができます。
- 太字
- 斜体
- リンク
Action Textが出力する太字タグの変更
Action Textはデフォルトで太字を<strong>タグとしています。<b>タグにしたい場合は、以下のように記述します。
Trix.config.textAttributes.bold = {
tagName: "b"
}ActionTextが出力する斜体タグの変更
斜体にした場合は、デフォルトだと<em>タグが付与されます。
もしこれを<i>タグに変更したい場合は、下記のとおり記述しておけば問題ありません。
Trix.config.textAttributes.italic = {
tagName: "i"
}Action Textが出力するリンクタグの変更
リンクタグは、もちろんデフォルトで<a>タグになっています。
ここを変更することはほぼないと思いますが、もし変更する場合は以下。
Trix.config.textAttributes.href = {
groupTagName: "a"
}tagNameではなくgroupTagNameに変わっている点に注意してください。
まとめ
Rails6からActionTextが導入されたことで、WYSIWYGエディタの利用までのハードルがかなり下がりました。
ただしデフォルトで挿入される段落ブロックのタグが<div>だったり記事内見出しタグが<h1>になっていて、やや使いにくい面も。
きちんと導入時にタグの設定をしておくことで、先に問題を回避しておくとよいでしょう。
コメント