TinyMCEで自動消去されるコードを使用する

投稿日: 2017年11月15日

Concrete5(5.6系)でブロックの編集はTinyMCEが使用されています。ところが、このTinyMCEには使用できるコードに制限があり、許可されていないコードについては自動的に消去されます。特に、HTML5に関するものは消去されるものが多いです。

<section>や<article>などは使用できません。HTML5のタグが使えれば表現方法に幅が出るので使用できるようにしました。

使用する方法は環境によって異なります

調べてみるとHTML5のタグを使用する方法は大きく分けると二つあります。私の環境下では二番目のTinyMCE の設定をオーバーライドすることで使用可能になりました。

記事ブロックエディターの設定を変更する

「管理画面」⇒「システムの設定」⇒「記事ブロックエディターの設定」と進んでいき、ツールバーセットを「カスタム」に変更して、表示された部分にコードを追記する、というものでしたが、動作しませんでした。追記ではなく、入れ替えると動作はしますが、エディター画面の見た目が大きく変わってしまい、使用に耐えるものではありませんでした。

TinyMCEの設定をオーバーライドする

TinyMCEの設定である「concrete/blocks/content/editor_config.php 」を「 blocks/content/」にコピーして、例えばsectionタグを使いたい場合、

tinyMCE.init({
extended_valid_elements : "section[class|id|style|title]"
)}

を追記するのですが、editor_config.php の記述方法が異なっていました。

$textEditorOptions = Loader::helper('tinymce')->getOptions($textEditorOptions);
?><script language="javascript" type="text/javascript">
tinyMCE.init(<?php echo Loader::helper('json')->encode($textEditorOptions); ?>);
</script>

コードをそのままを追記しても、tinyMCE.init 部分をひとまとめにしても、動作するときはあってもエディターの見た目が変わり、とても使用できる状態にはなりません。もともと textEditorOptions へ格納していますのでそんなことをしても動作するわけはありませんが。

tinyMCE.init はそのまま、extended_valid_elements を別の場所に記述

他のサイトを確認してみると、extended_valid_elements をtextEditorOptionsに格納する方法が紹介されていました。

$textEditorOptions['extended_valid_elements'] = 'header[id|class],nav';

「header[id|class],nav」の部分に自分が追加したいタグを列挙してようやく動作しました。ずいぶんと時間を費やしてしまいましたが、これで、表現の幅が広がります。ただ、ブラウザによって使えるタグなどが異なるのでCan I useで確認するようにしていきましょう。