Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Movable Type 9 ManualMovable Type 9 マニュアル

リッチテキストエディタ (Tiptap) の入力支援一覧

最終更新日: 2025.10.10

Movable Type には記事やウェブページ、コンテンツデータの「テキスト(複数行)」で文章を書くためのフォーマットとしてリッチテキストエディタを利用できます。
Movable Type 9 リッチテキストエディタでは、Tiptap をベースに標準プラグインとし提供しています。
※Movable Type 9、Movable Type 8.8.0 以前は TinyMCE プラグインを利用しています。

Movable Type 8.8.0 以前から Movable Type 9 にアップデートした場合

TinyMCE プラグインを使用している環境から Movable Type 9 にアップデートした場合は、TinyMCE プラグインがそのまま使用されます。
Tiptap ベースのリッチテキストエディタを利用する場合は mt-config.cgi で Editor mt_rich_text_editor を指定してください。
詳しくは 環境変数リファレンス:Editor をご確認ください。


フォーマット:リッチテキストを選択できるエディターは以下の箇所で利用可能です。

  1. [記事]の[本文]または[続き]
  2. [ウェブページ]の[本文]または[続き]
  3. [コンテンツデータ]の[テキスト(複数行)]

フォーマット:ブロックエディタ内のテキストブロックでもリッテキストの一部の機能が使えます。

リッチテキストフォーマットの入力画面

フォーマットをリッチテキストに設定すると、WYSIWYGモードでの編集が可能となります。

リッチテキストフォーマットの入力画面.jpg

入力支援ボタンの機能詳細

WYSIWYGモードの際に表示される、入力支援ボタンの機能は以下のとおりです。

ボタン 動作 タグ
icon-bold.png 文字を最強調します <strong>text</strong>
icon-italic.png 文字を強調します <em>text</em>
icon-italic.png 下線を表示します <span style="text-decoraton:under-line;">text</span>
icon-italic.png 打ち消し線を表示します <del datetime="YYYY-MM-DDTHH:MM:SS">text</del> datetime
icon-italic.png 引用を表します <blockquote></blockquote>
icon-italic.png 番号なしリストを表示をします <ul>
  <li>text</li>
</ul>
icon-italic.png 番号付きリストを表示します <ol>
  <li>text</li>
</ol>
icon-italic.png 水平線を挿入します <hr />
icon-italic.png リンクを挿入します <a href="url">text</a>
icon-italic.png リンクを解除します
icon-italic.png HTMLを挿入します <a href="FileURL">File</a>
icon-italic.png アセットを挿入します 挿入時の設定に準じます
icon-italic.png 画像を挿入します 挿入時の設定に準じます
icon-italic.png 表を挿入します 挿入時の設定に準じます
icon-italic.png アンドゥを行います
icon-italic.png リドゥを行います
icon-italic.png テキストの文字色を設定します <span style="color:#ff0000;">Text</span>
icon-italic.png 文字の背景色を設定します <span style="background-color:#ff0000;">text</span>
icon-italic.png 書式を削除します
icon-italic.png 左揃えにします <p style="text-align: left">左揃え</p>
icon-italic.png 中央揃えにします <p style="text-align: center">中央揃え</p>
icon-italic.png 右揃えにします <p style="text-align: right">右揃え</p>
icon-italic.png インデントをします <p style="padding-left: 30px;">text</p>
icon-italic.png インデントがあった場合、解除します インデントをひとつ解除(-30px)
インデントが0になったときは設定を消去
段落 テキストの文字サイズを選択します
icon-italic.png フルスクリーンモードに切り替えます

テキストを選択して入力支援ボタンをクリックした場合

選択したテキストを挟んで、前後に開始タグと終了タグが挿入されます。装飾完了後は、終了タグの後ろにカーソルが移動します。

<strong>Text</strong>|

テキストを選択せずに入力支援ボタンをクリックした場合

カーソル位置の前に、開始タグが挿入されます。もう一度同じ入力支援ボタンを押すと、カーソル位置の後ろに終了タグが挿入され、カーソルが終了タグの後ろに移動します。

<strong>Text Foo Bar
<strong>Text</strong> Foo Bar

ブロックエディタの入力支援ボタンの機能詳細

ブロックエディタのテキストブロックにおける入力支援ボタンの機能は以下のとおりです。

ブロックエディタの入力支援ボタンの機能詳細.png
ボタン 動作 タグ
icon-bold.png 文字を最強調します <strong>text</strong>
icon-italic.png 文字を強調します <em>text</em>
icon-italic.png 下線を表示します <span style="text-decoraton:under-line;">text</span>
icon-italic.png 打ち消し線を表示します <del datetime="YYYY-MM-DDTHH:MM:SS">text</del> datetime
icon-italic.png 引用を表します <blockquote></blockquote>
icon-italic.png 番号なしリストを表示をします <ul>
  <li>text</li>
</ul>
icon-italic.png 番号付きリストを表示します <ol>
  <li>text</li>
</ol>
icon-italic.png 水平線を挿入します <hr />
icon-italic.png リンクを挿入します <a href="url">text</a>
icon-italic.png リンクを解除します
icon-italic.png テキストの文字色を設定します <span style="color:#ff0000;">Text</span>
icon-italic.png 文字の背景色を設定します <span style="background-color:#ff0000;">text</span>
icon-italic.png 書式を削除します
icon-italic.png 左揃えにします <p style="text-align: left">左揃え</p>
icon-italic.png 中央揃えにします <p style="text-align: center">中央揃え</p>
icon-italic.png 右揃えにします <p style="text-align: right">右揃え</p>
icon-italic.png インデントをします <p style="padding-left: 30px;">text</p>
icon-italic.png インデントがあった場合、解除します インデントをひとつ解除(-30px)
インデントが0になったときは設定を消去
段落 テキストの文字サイズを選択します
目次
コンテンツタイプ学習サイト トフでもできるコンテンツタイプ