PowerCMS™

PowerCMS ブログ

ホーム > PowerCMS ブログ > PowerCMS 5 の新しいリッチテキストエディタ

2018年05月08日

PowerCMS 5 の新しいリッチテキストエディタ

PowerCMS 5 では、リッチテキストエディタが TinyMCE3 から TinyMCE4 にバージョンアップされました。TinyMCE4では新しいブラウザへの対応や、新しいUIやテーマ、APIの変更、プラグインの追加・変更などの変更が行われています。

TinyMCE4 になっても従来通り PowerCMS から設定を変更することができます。 たとえば Color picker プラグインを使用するにはシステム管理画面のサイドメニューの「設定」→「PowerCMS」の「TinyMCE 設定」の各入力欄に以下の内容を追加します。

  • plugins: colorpicker
  • advanced_buttons1: colorpicker

また、プラグインによってはツールバーへのボタンの追加の指定以外の設定が必要なものもあります。Text Pattern Plugin は入力されたテキストが特定のパターンだった時に対応する書式に変換するというプラグインで、使用するにはパターンの設定が必要です。そういったものについては「高度な設定」欄を使用することで設定することができます。このプラグインを使用するには以下のように指定します。

  • plugins: textpattern
  • 高度な設定:
    tinymce_editor.init['textpattern_patterns'] = [
         {start: '#', format: 'h1'},
         {start: '##', format: 'h2'},
         {start: '###', format: 'h3'},
    ];
    

このように指定すると、「#見出し」と入力してリターンキーを押すとh1要素に変換されるようになります。

アップグレード時の互換性

TinyMCE4 と TinyMCE3 とではプラグインの構成や機能等が異なっているため、TinyMCE3 から 4 に移行した際に必要な機能が使用できなくなる可能性があります。そのため PowerCMS 5 では下位バージョンからのアップグレード場合には TinyMCE3 が維持されるようになっています。どのバージョンの TinyMCE を使用しているかはシステム管理画面のサイドメニューの「設定」→「PowerCMS」の「TinyMCE 設定」に表示されている「バージョン」の項目から確認することができます。

使用するTinyMCEのバージョンは環境変数 TinyMCEVersion により変更することができます。アップグレード後にTinyMCE4に切り替える場合はmt-config.cgiに以下の行を追加します。

TinyMCEVersion 4

逆に TinyMCE4 から 3 に変更することもできます。その場合は mt-config.cgi に以下の行を追加します。

TinyMCEVersion 3

また、同様の理由から「TinyMCE 設定」の設定項目はバージョンごとに別の項目が用意されています。これにより使用するTinyMCEのバージョンを変更した際に以前の設定が失われないようになっています。なお、管理画面では使用中のバージョンに対する項目のみが表示されるようになっているため、別の項目になっていることを意識せずに現在使用中のバージョンに対する設定を行うことができます。バージョンごとに別の項目になっているものは「コンテンツCSSファイル」を除く以下の項目になります。

  • plugins
  • advanced_buttons1〜5
  • source_buttons1〜5
  • 高度な設定

アップグレード後に環境変数 TinyMCEVersion によってバージョンを4に切り替えた場合は、TinyMCE4 用の PowerCMS のデフォルトの設定が入った状態になっています。

スマートフォン・タブレットでの挙動

スマートフォンやタブレットなどの PC 以外の環境ではリッチテキストエディタは非表示となり使用できない状態になります。これはスマートフォンやタブレットでは行えない操作があるためです。

リッチテキストエディタを非表示とするかどうかの判定はユーザーエージェント名で行われます。PC でアクセスしている状態でウインドウの幅を縮めると画面はスマーフォン用の表示に切り替わりますが、リッチテキストエディタは利用可能な状態のままとなります。


カテゴリー
PowerCMS 5
投稿者
Sakai Ryuji