CodeSample プラグイン
かなり後になってからですが、TinyMCE には html や css、その他のソースコードを埋め込める
code sample Plugin があることに気が付きました。
設定としては、tinymce.init() の中で、plugins: と toolbar: の文字列値の中に "codesample" を加えるだけです。
少しハマってしまった障害について書いておきます。
code sample plugin は、ポップアップで編集画面が表示されるので、その中ではタグ文字は単なる文字として扱われます。
ただ、使ったところ、html が保管はされるのですが、再度読み込んだ際に、タグが表示されず消えてしまいます。
「おかしいな？バグ？」と思いながら、良く良く調べていたら textarea に設定する文字列のタグ文字の
エスケープ処理が怪しいと気が付きました。昔も textarea の表示で経験したトラブルの事をすっかり忘れていました。
どういう事かと言うと、codesample では、編集エリア内の"<>"文字を"<>"にエスケープしてくれます。
データベースへはそのまま保存します。(ここまでは普通です)
JSP(プログラム)でデータベースから文章を読んで、textarea 内に渡す際は、タグ文字をエスケープ文字にしますが、"＆"も ＆amp;に
変換して渡す必要があります。そうしないとブラウザが textarea を表示した際に解釈してしまって codesample に伝わわない訳でした。
なお、codesample を使った場合、prism.css、prism.js をプレビューに加えないと、
同じスタイルになりません。
<!-- code sample plugin での html の表示例 -->
<html>
<body>
ちゃんと表示されますか？
</body>
</html>| « 前頁 | 次頁 » |