Movable Typeのコンテンツタイプで使用できるブロックエディタは以前記事内で取り上げましたが、MTブロックエディタというプラグインを使うと、記事やウェブページでもブロックエディタの機能を使えるようだったので、簡単に試してみます。
プラグインの導入
プラグインはGithubで公開されているので、最新版をダウンロードしてきます。
MTを設置しているディレクトリに、以下データをアップロードします。
- mt-static > plugins > MTBlockEditor
- plugins > MTBlockEditor
管理画面にログインすると以下のような画面が表示されるので、アップグレード開始をクリックします。
アップグレード完了後、MTブロックエディタが追加されていることを確認できました。
前述の通り、MTブロックエディタはコンテンツタイプだけではなく、記事やウェブページでも使用できます。
コンテンツタイプではテキスト(複数行)のフォーマット、記事やウェブページで使用する際は本文のフォーマットから変更できます。
使用できるブロックの種類
MTブロックエディタでブロックを追加を選択すると、以下のように表示されます。
MTブロックエディタで使用できるブロックは以下の通りです。
- テキストブロック
- 画像
- ファイル
- HTML
- oEmbed
- 罫線
- テーブル
- マルチカラム
それぞれのブロックの内容を確認してみます。
テキストブロック
テキストブロックでは段落や見出し、リスト、引用といったテキストの追加ができます。
太字や斜体、下線などのテキストの装飾やリンクの設定も可能です。
Shift + Enterで改行、Enterで新しいテキストブロックの追加になるようです。
入力テストを行ったところ、以下のようなHTMLが出力されました。(改行位置調整しています。)
<p>段落 <strong>太字</strong> <em>斜体</em> <span style="text-decoration: underline;">下線</span> <span style="text-decoration: line-through;">打消線</span> <span style="color: #e03e2d;">文字色</span> <span style="background-color: #236fa1;">背景色</span> <a href="https://www.google.com/">リンク</a> </p> <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> <pre>書式設定済み</pre> <p style="text-align: left;">左揃え</p> <p style="text-align: center;">中央揃え</p> <p style="text-align: right;">右揃え</p> <ul> <li>箇条書き</li> </ul> <ol> <li>番号付き箇条書き</li> </ol> <p style="padding-left: 40px;">インデントを増やす</p> <blockquote> <p>引用</p> </blockquote>
画像
画像の挿入ができるブロックです。
挿入オプションとして以下のような項目を設定できるようになっています。
HTMLでの出力例は以下の通りです。
<p><img src="https://XXXXXXXX/XXX/test.jpg" alt="" width="800" height="534" class="asset asset-image" style="max-width:100%;height:auto;display:block"/></p> <!-- 挿入オプション設定例 --> <figure class="mt-figure mt-figure-center"> <a href="https://XXXXXXXX/XXX/test.jpg" target="_self"> <img src="https://XXXXXXXX/XXX/assets_c/YYYY/MM/test-thumb-800x534-6.jpg" alt="代替テキスト" width="800" height="534" class="asset asset-image mt-image-center" style="max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto"/> </a> <figcaption>キャプション</figcaption> </figure>
ファイル
PDFなどのファイルの挿入ができるブロックです。
PDFを挿入した場合のHTMLの出力例は以下の通りです。
<div><a href="https://XXXXXXXX/XXX/test.pdf">test.pdf</a></div>
HTML
HTMLタグを挿入できるブロックです。
以下の内容で試してみたところ、scriptタグもそのまま出力されるようでした。
<div class="html-sample"> <p>HTMLサンプル</p> </div> <script src="./test,js"></script>
oEmbed
外部サービスの埋め込みを行うブロックです。
対応しているサービスについては公式のドキュメントをご確認ください。
YouTubeとTwitter(X)を試してみた結果は以下の通りで、x.comのドメインだと埋め込みのHTMLを取得することができないようでした。
<!-- YouTubeの埋め込み --> <iframe width="200" height="113" src="https://www.youtube.com/embed/lGQDHKzLznE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="W●RK / 星街すいせい×葛葉(Cover)"></iframe> <!-- YouTubeの埋め込みで最大幅と最大高さを設定した場合 --> <iframe width="480" height="270" src="https://www.youtube.com/embed/lGQDHKzLznE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="W●RK / 星街すいせい×葛葉(Cover)"></iframe> <!-- twitter.comのURLでの埋め込み --> <a class="twitter-timeline" href="https://twitter.com/cly7796net?ref_src=twsrc%5Etfw">Tweets by cly7796net</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <!-- x.comのURLでの埋め込み --> 埋め込み用のHTMLを取得することができませんでした: https://x.com/cly7796net
罫線
罫線を埋め込むブロックです。
HTMLでの出力例は以下の通りです。
<hr/>
テーブル
テーブルを挿入できるブロックです。
ブロックを追加すると、以下のようなUIが表示されます。
左は時の表のアイコンを選択すると以下のようになり、そこから列数と行数を選択してテーブルを挿入できます。
テーブルの挿入後は各セルにテキストの入力や、左上の表アイコン内からセルの結合やヘッダーやフッターの追加、キャプションの追加などが行えます。
HTMLでの出力例は以下の通りです。
<table style="border-collapse: collapse; width: 100%;" border="1"> <tbody> <tr> <td style="width: 50%;">A1</td> <td style="width: 50%;">A2</td> </tr> <tr> <td style="width: 50%;">B1</td> <td style="width: 50%;">B2</td> </tr> </tbody> </table> <table style="border-collapse: collapse; width: 100%;" border="1"> <caption>キャプション</caption> <tfoot> <tr style="text-align: right;"> <td style="width: 25%;"> フッター</td> <td style="width: 25%;">フッター</td> <td style="width: 50%;">フッター</td> </tr> </tfoot> <thead> <tr style="text-align: center;"> <td style="width: 25%;">ヘッダー</td> <td style="width: 25%;">ヘッダー</td> <td style="width: 50%;">ヘッダー</td> </tr> </thead> <tbody> <tr> <td style="width: 50%;" colspan="2">結合テスト</td> <td style="width: 50%;" rowspan="2">結合テスト</td> </tr> <tr> <td style="width: 25%; text-align: center; vertical-align: middle;"> 中央</td> <td style="width: 25%; background-color: #3598db;"> 背景色</td> </tr> </tbody> </table>
マルチカラム
ブロックを横並びに配置するブロックです。
ブロックを追加すると、以下のように横並びでブロックの追加エリアが表示されます。
ブロックを追加を選択すると、今までと同様のブロック選択が行えます。
カラムの中にはブロックを複数積み重ねることもできます。
左上のアイコンからカラム数を変更することもできます。(2～4カラム)
HTMLでの出力例は以下の通りです。
<div class="mt-be-columns" style="display: flex"> <div class='mt-be-column'> <h3>左ブロック</h3> <p>ブロック追加</p> </div> <div class='mt-be-column'> <h3>右ブロック</h3> <p><img src="https://XXXXXXXX/XXX/test.jpg" alt="" width="800" height="534" class="asset asset-image" style="max-width:100%;height:auto;display:block"/></p> </div> </div> <div class="mt-be-columns" style="display: flex"> <div class='mt-be-column'> <p>左</p> </div> <div class='mt-be-column'> <p>中</p> </div> <div class='mt-be-column'> <p>右</p> </div> </div> <div class="mt-be-columns" style="display: flex"> <div class='mt-be-column'> <p>1</p> </div> <div class='mt-be-column'> <p>2</p> </div> <div class='mt-be-column'> <p>3</p> </div> <div class='mt-be-column'> <p>4</p> </div> </div> </div>
コメントが承認されるまで時間がかかります。