Movable Typeのエディタについて調べてみる

記事やウェブページのエディタのフォーマットでよく使用するリッチテキストと、コンテンツタイプで追加されたブロックエディタについて調べてみました。

記事・ウェブページのリッチテキスト

記事やウェブページの本文入力でリッチテキストを選択している場合、以下のような表示になります。

ボタンの左上から順にどのように出力されるか試してみます。

太字・斜体・下線・取り消し線

<p><strong>太字</strong><em>斜体</em><span style="text-decoration: underline;">下線</span><del datetime="XXXXXXXXXX">取り消し線</del></p>

引用ブロック

<blockquote>
<p>引用</p>
</blockquote>

番号なしリスト・番号付きリスト

<ul>
<li>番号なしリスト1</li>
<li>番号なしリスト2</li>
</ul>
<ol>
<li>番号付きリスト1</li>
<li>番号付きリスト2</li>
</ol>

水平線を挿入

<hr />

リンクの挿入・編集

<p><a href="https://cly7796.net/blog/">リンク</a></p>

HTMLの挿入

今回はYouTubeの埋め込み(iframe)を試してみました。

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/2OTVCHpEkrc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen"></iframe></p>

アセットの挿入(PDF)

<p><a href="http://XXXXX/test.pdf">test.pdf</a></p>

画像の挿入

<p><img alt="cat.jpg" src="http://XXXXX/cat.jpg" width="xx" height="xx" class="mt-image-none" /></p>

画像挿入時、以下のように詳細を設定することもできます。

例として、位置の3パターンを試してみます。

画像の挿入(位置:左)

<p><img alt="cat.jpg" src="http://XXXXX/cat.jpg" width="xx" height="xx" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></p>

画像の挿入(位置:中央)

<p><img alt="cat.jpg" src="http://XXXXX/cat.jpg" width="xx" height="xx" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></p>

画像の挿入(位置:右)

<p><img alt="cat.jpg" src="http://XXXXX/cat.jpg" width="xx" height="xx" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></p>

位置に応じてclass名が変わるほか、位置を左右にした場合にはstyleに直接指定でfloatされます。

テキスト色

<p><span style="color: #ff0000;">赤色</span></p>

背景色

<p><span style="background-color: #ff0000;">背景赤色</span></p>

字下げを増やす

<p style="padding-left: 30px;">字下げを増やす</p>

段落

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<pre>Preformatted</pre>

以上が記事やウェブページのリッチテキストで設定できる内容になります。
　

コンテンツタイプのリッチテキスト

バージョン7から追加されたコンテンツタイプの場合、「テキスト(複数行)」フィールドでリッチテキストが使用できます。
ただし、ボタン部分がインラインで表示されるようになっていて、さらにボタンも一部なくなっています。

出力されるタグは前述のものと同じなので割愛します。
　

コンテンツタイプのブロックエディタ

コンテンツタイプの「テキスト(複数行)」フィールドには、ブロックエディタというフォーマットがあります。
リッチテキストのようにエディタ内でタグ付けしていくのではなく、ブロック単位で内容を構成していく形になります。

下部のプラスのアイコンをクリックすると、ブロックを選択するポップアップが表示されます。

選択できるブロックは以下の5種類です。

見出しはその名前の通り見出しを追加できるブロックで、H1～H6までを選択できます。

テキストは文章の追加と、文章内の斜体や下線などのスタイルを設定できます。
テキストを選択すると以下のように入力エリアが追加され、リッチテキストと同様にインラインでスタイルを適用するボタンが表示されます。

埋め込みコードはYouTubeやGoogle Mapsなど、タグをそのまま埋め込みたい場合に使用します。
選択すると以下のようなエリアが追加されます。

画像を選択すると、アップロードしているアセットから画像を選択、または左上から画像のアップロードができます。

選択またはアップロード後、以下のようにaltや位置などの設定ができます。
タイトルが2つありますが、左がtitle属性に入るテキストで、右はfigcaptionに入るテキストのようです。

右側のタイトルにテキストを入れると、以下のようにfigureタグで出力されました。

<figure>
  <img src="http://XXXXX/004234.jpg" alt="代替テキスト" title="左のタイトル" width="500" class="mt-image-none">
  <figcaption>右のタイトル</figcaption>
</figure>

最後の水平線はhrの挿入になります。

右上の並び替えタブで、ブロックの並び順の変更もできます。

ブロックエディタは動作の怪しいところが少しありましたが、ブロックを追加したり並び替えたりできる機能は便利そうだと思いましたので、そのうちまた使ってみたいと思います。