Movable Type の TinyMCE リッチエディタで HTML 実体参照文字の扱いを MTAppjQuery で変更する

Movable Type 7 + MTAppjQuery でサイトごとに TinyMCE のボタンをカスタマイズする方法をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

Movable Type 7 のリッチテキストエディタで HTML 実際参照文字の扱い方の変更方法をご紹介します。

例えば、デフォルトのリッチテキストにコピーライトマークの HTML 実体参照文字を入力してみます。

20210316161040 min

これを「HTML編集モードの切り替えボタン </>」をクリックして HTML 編集モードに切り替えると下記のように & が実体参照文字に変換されてしまいます。これだと意図と違いますね。

20210316161130 min

そこで HTML 編集モードにした状態でコピーライトマークの HTML 実体参照文字を入力してみます。

20210316161534 min

HTML 編集モードを解除すると、コピーライトのマーク(丸C)に変換されます。

20210316161650 min

この状態で再度 HTML 編集モードにすると、こちらもコピーライトのマークになり、最初に入力した状態と異なります。

20210316161947 min

この動作がデフォルトの動作となります。

entity_encoding オプション

この HTML 実体参照文字の取り扱い方は、entity_encoding というオプションで変更できます。

このオプションには、下記の3つの設定が可能です。

  • named
  • numeric
  • raw(初期値)

このうち raw が上述したデフォルトの動作になります。

named

このオプションに変更すると、HTML 編集モードにしたときの実体参照文字が「&キーワード;」という形式になります。つまり、再構築して出力されるのも「&キーワード;」の形式になります。

リッチエディタ

20210316162625 min

HTML 編集モード

20210316161534 min

numeric

このオプションに変更すると、HTML 編集モードにしたときの実体参照文字が「&#数値;」という形式になります。つまり、再構築して出力されるのも「&#数値;」の形式になります。

リッチエディタ

20210316162625 min

HTML 編集モード

20210316163126 min

設定の変更方法

サイトまたはシステムのプラグイン設定画面を開き、MTAppjQueryの「設定」タブを開きます。その中に「user.css の読み込み直前」というテキストエリアがありますので、下記の設定を入れてください。

<script>
MT.Editor.TinyMCE.config.entity_encoding = 'named';
</script>

このようにして、上記の named numeric raw のいずれかの値を設定して、Movable Type のデフォルトのリッチエディタの挙動を変更できます。

なお、当設定はこのコードを追記したサイトもしくはシステム全体に影響しますのでご了承ください。

ちなみに、この方法を利用すると、サイトごとや記事とコンテンツタイプごとに TinyMCE の設定を変更することができます。それについては追って記事にします。

Published 2021-03-16
Updated 2021-03-16

「MTAppjQuery」カテゴリの記事一覧