入力全体を自動でHTMLタグにする方法

「すぐ使えるCMS」では、入力欄に入力したHTMLタグは、単なる文字として扱われます。HTMLタグを有効にするには、入力を {{{ と }}} で囲う必要があります。

{{{ と }}} によるHTMLタグは、入力の文章中の自由な位置に挿入できますが、文章中のタグ付とは別に、一つの欄の入力全体を常に {{{ と }}} で囲みたい場合があります。例えば、Google Maps （地図）の埋め込みコードや広告のスニペット、動画の共有タグを入力する場合などです。

このような場合に、入力時にいちいち {{{ と }}} で囲わずに、自動で {{{ と }}} を付けて入力全体をHMTLタグとして有効にする方法をご紹介します。自動で付けた {{{ と }}} は、再度入力画面を表示した時は自動で削除されます。

自動でHTMLタグを有効にする方法

templates/admin/2.html の編集

入力画面のテンプレート templates/admin/2.html を開いて、以下の3点を追加して下さい。

クラス snippet の設定

HTMLタグ入力をしたい欄（<textarea name="blocktext1"> など）のクラスに「snippet」を追加して下さい。

既存のクラスに追加する例

もし既にクラス指定がされているのであれば、スペースでつなげて追加して下さい。

コピー

<textarea name="blocktext1" class="imeauto snippet">

既存のクラスが無かった場合の例

既存のクラス指定が無ければ、class 属性もまとめて追加して下さい。

コピー

<textarea name="blocktext1" class="snippet">

jQuery の追加

templates/admin/2.html で jQuery が使えるようにします。

templates/admin/2.html の中を探して、「jquery.js」や「jquery.min.js」「jquery-#.#.#.js」（「#」は数字）などの名前の src を読み込んでいる <script> タグが無いかを探して下さい。もし既にいずれかの jQuery ファイルが読み込まれているのであれば、以下のタグの追加は不要です。

まだ無かったら、下記のタグを </body> （終了タグ）の前、かつ、他の <script> タグの前に追加して下さい。

コピー

<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>

JavaScript コードの追加

引き続き templates/admin/2.html を編集します。ファイルの状態によって、2つのパターンがあります。まずは、ページ内を検索して「$(document).ready(function(){」という表記があるかどうかを探して下さい。

$(document).ready ... が見つからない場合

もし「$(document).ready(function(){」という記載が見つからなければ、以下のコードを、一番最後にある </script> の直前に追加して下さい。

コピー

$(document).ready(function() {
   $(".snippet").each(function(){
      $(this).text($(this).val().replace(/{{{/g, '').replace(/}}}/g, ''));
   });
});
<-- ここまで追加 -->
</script> // <-- ファイル内で見つかった一番最後の「</script>」（追加不要）

既に $(document).ready ... がある場合

「$(document).ready(function(){」という記載が既にあれば、この行の下に、以下の赤字部分のコードのみ追加して下さい。

コピー

$(document).ready(function() {
   $(".snippet").each(function(){
      $(this).text($(this).val().replace(/{{{/g, '').replace(/}}}/g, ''));
   });
   //この下には既存のコードがある
});

JavaScript ファイルの編集

もう1か所 JavaScript の編集をしますが、編集対象のファイルが製品によって異なります。

編集対象ファイルを探す

「function set_order(LIST){」という記載のある場所を探します。以下の順で探して下さい。

templates/admin/2.html の中に「function set_order(LIST){」という記載があるか探して下さい。
templates/admin/2.html ページ内の <script> タグの中で、src が sugu-admin.js または admin.js という名前のファイルがあればそのファイルの中を探して下さい。

編集内容

「function set_order(LIST){」の行の下に、以下の赤字部分のコードを追加して下さい。

コピー

function set_order(LIST){
    //追加ここから
    $(".snippet").each(function(){
        var Id = $(this).attr("id");
        document.getElementById(Id).value = "{{{"+$(this).val()+"}}}";
    });
    //追加ここまで
 
    //以下は既存のコード。これと同じでない場合もあり。
    var ListTable = document.getElementById(LIST);
    var FileTarget;
　　：

アップロード

編集済ファイルを上書きアップロードして下さい。

確認

ブラウザのキャッシュを一旦クリアしてから動作テストをして下さい。