TinyMCE4に独自のCSSを適用する
Evolution CMSのTinyMCE4に独自のCSSを適用するには次のようにします。
- ※ Evolution CMSにTinyMCE4がインストールされていることが前提となります。
- ※ プラグイン本体のスクリプトを編集するので、自己責任でお願いします。
CSSの準備
例えば次のようなCSSファイルを準備します。
CSS
.column-text-image {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}保存先はURLで読み込める場所ならどこでも問題ありません。
ここでは仮に「assets/plugins/tinymce4/style/styke.css」に保存しておきます。
管理画面の編集
「システム」アイコンを押し、メニューから「グローバル設定」を押します。
タブから「管理画面の設定」を押します。
ページの中間あたりにある「CSSファイルへのパス」項目を入力します。
パスはEvolution CMSのインストールされているURLをルートとしたパスを指定します。
[~13~]といったリソースIDによるリンクパスは使用できません。
「保存」ボタンを押します。
TinyMCEのスクリプトを編集
「assets/plugins/tinymce4/theme/theme.tinymce4.base.inc.php」ファイルをテキストエディタなどで開き、編集します。59行目付近にある「editor_css_path」の設定を反映している部分で、$modxをevo()に修正します。
PHP：変更前
if( !empty( $modx->config['editor_css_path'] )) {
$this->set('content_css', explode(',',$modx->config['editor_css_path']), 'array'); // https://www.tinymce.com/docs/configure/content-appearance/#content_css
};PHP：変更後
if( !empty( evo()->config['editor_css_path'] )) {
$this->set('content_css', explode(',',evo()->config['editor_css_path']), 'array'); // https://www.tinymce.com/docs/configure/content-appearance/#content_css
};確認
リソースの編集画面でCSSが適用されていることを確認します。
これで完了です。