小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

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

最終更新日: 2017-02-07

「すぐ使えるCGI」では、入力欄に入力したHTMLタグは、初期設定では単なる文字として扱われます。{{{ と }}} で囲えば HTML タグとして有効になります。

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

Google マップを表示するページの例

このような場合に、入力時にいちいち {{{ と }}} で囲わずに、自動で {{{ と }}} を付けて入力全体を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 ... がある場合
ページ内を検索を検索して「$(document).ready(function(){」という記載が見つかれば、この行の下に、以下のコードを追加して下さい。
$(".snippet").each(function(){
	$(this).text($(this).val().replace(/{{{/g, '').replace(/}}}/g, ''));
});
$(document).ready ... が見つからない場合
もし「$(document).ready(function(){」という記載が見つからなければ、以下のコードを、一番最後にある </script> の直前に追加して下さい。
$(document).ready(function() {
   $(".snippet").each(function(){
      $(this).text($(this).val().replace(/{{{/g, '').replace(/}}}/g, ''));
   });
});
<-- ここまで追加 -->
</script> // <-- ファイル内で見つかった一番最後の「</script>」(追加不要)

JavaScript ファイルの編集

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

編集対象ファイルを探す

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

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

編集内容

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

$(".snippet").each(function(){
	var Id = $(this).attr("id");
	if ($(this).val()!=""){
		document.getElementById(Id).value = "{{{"+$(this).val()+"}}}";
	}
});

アップロード

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

確認

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

関連リンク

さらに詳しく