BLOG

Movable Type 8でTinyMCE 6の設定を自作プラグインでカスタマイズ

Written by okoshi

INDEX

最近はあまりWYSIWYG（ウィジウィグ）って聞くことも少なくなりましたが、ブログの編集画面などでWordのように見たまま編集できるというリッチテキストエディタ、TinyMCE。

Wordpressのクラシックエディタなんかでも使われていましたが、MovableTypeでは今もv5とV6が同梱されており、記事/ウェブページ本文エリアの編集の他にMTブロックエディタのテキストブロック等にも使用されています。

弊社は受託制作の他にワンコ事業というものもやっておりまして、ワンコnowa というメディアサイトの運営をしています。このサイトは Movable Typeで構築されており、MT8へアップデートするタイミングで管理画面内も少し改修を入れました。

その際、リッチテキストエディタ（TinyMCE 6）に自作プラグインを使用したカスタマイズを加えたのでここで紹介したいと思います。

加えた変更は下記の4つ。

  • ツールバーのプルダウンメニューから「見出し1 h1」と「書式設定済み pre 」を削除
  • 文字色・背景色パレットの変更
  • 「U」ボタンのマークアップの変更
  • ペースト時のスタイルの削除

TinyMCEの設定の確認

やりたいことはTinyMCEの設定の変更なので、まずは 公式ドキュメントを参照します。

ツールバーのプルダウンは block_formats 、色関係は color_map 、「U」ボタン（ underline ）は formats、ペースト時のスタイル削除は paste_as_text で設定できそうです。

MTプラグインの作成

次に管理画面のエディタのTinyMCEに上記の設定を反映する方法を。

2013年の記事になりますが、Movable TypeのTinyMCEに任意のボタンを追加する方法 によるとプラグインを自作することで反映できそうです。

というわけで、自作するプラグインの名前を TinyMCE6Custom とした場合のファイル構成は下記のようになります。

$MT_DIR/
    ├─ mt-static/
    │    └─ plugins/
    │        └─ TinyMCE6Custom/
    │            └─ extension.js
    └─ plugins/
        └─ TinyMCE6Custom/
            ├─ config.yaml
            └─ tmpl/
                └─ TinyMCE6Custom/
                    └─extension.tmpl

※$MT_DIR はMTインストールディレクトリ

※ mt-static/plugins/と plugins/ それぞれに設置する必要があります。

※MovableTypeのプラグインの作り方については プラグイン開発のためのファーストステップ 参照

コード内容

config.yaml

設定画面で表示される情報、読み込むテンプレートを config.yaml に記入します。


id: TinyMCE6Custom
name: TinyMCE6 Custom Config
version: 1.00
author_link: <https://www.evoworx.co.jp/>
author_name: EVOWORX
description: TinyMCE6の設定をカスタマイズします。
editors:
    tinymce:
        extension: extension.tmpl

extension.tmpl

管理画面内で実行したいコードを extension.tmpl に記入します。

<mt:SetVarBlock name='js_include' append='1'>
  <mt:script path="plugins/TinyMCE6Custom/extension.js">
</mt:SetVarBlock>

※管理画面に <script src="$MT_STATIC/plugins/TinyMCE6Custon/extension.js"></script> を追記するという内容です。（ $MT_STATIC は mt-static ディレクトリの場所）

extension.js

管理画面内で実行するjs（tinyMCEの overrideDefaults で設定を上書き）を作成します。

document.addEventListener('DOMContentLoaded', () => {
  tinymce.overrideDefaults({
    ...tinymce.defaultOptions,
      formats: {
        underline: { inline: 'mark' }// <span style="text-decoration:underline;"></span> から <mark></mark> に変更
      },
      color_map: [ // 文字色・背景色でツールチップとして表示する色を指定
        '1d1d1d', 'Black',
        'FFFFFF', 'White',
        'e34e4e', 'Red',
        '666', 'Gray',
        'f4f5f6', 'GrayBg',
        'bf8a2f', 'Primary',
        'FAF6ED', 'PrimaryLight'
      ],
      block_formats: '段落=p; 見出し2=h2; 見出し3=h3; 見出し4=h4; 見出し5=h5; 見出し6=h6;',// プルダウンの表示名とタグ名を指定
      paste_as_text: true,// プレーンテキストとしてペーストを有効化
  })
})

実行

作成したファイルを、適用したいMovableTypeの環境の mt-static/plugins/ と plugins/ に設置すると、TinyMCEに変更が反映されます。

まとめ

デフォルトでは <span style="text-decoration:underline;"></span> でマークアップされる「U」ボタンは、リンクの下線と紛らわしいためあまり使う機会がないんですが、今回 <mark> タグを使いたい箇所があるのでショートカット的な役割としてカスタムしました。 <u> タグへの変更も可能ですが、MDNによると <u>: 非言語的注釈（下線）要素 なので、下線をつけるだけの役割としては <span> の方が正しいものと思われます。

「B」ボタンの<strong> や 「I」ボタンの <em> を別のものに変更することも可能です。

また、ペースト時のスタイルを保持した場合、リンク程度なら良いんですが、Wordなどは不要なstyle属性がついたり、Figmaからコピーしてきたテキストにいたっては大量のdata属性がついてくることがあるのでプレーンテキストにしておいたほうが何かと安全かと思います。

ドキュメントが少ないMovableTypeですが、日本の企業で使われることも多く、歴史も長いCMSなので、この記事がカスタムする際の参考になれば幸いです。

PICK UP