freoカスタマイズ集

※この記事は以前「freoのテンプレートファイルなどをfreoの管理画面で編集する方法」というものでしたが、freoにファイル管理プラグインが導入されたので全面的に改訂しました。

※ファイル管理プラグインを使う場合、テンプレート、css、jsなどの各ファイルはTinyMCEを使って編集することはできません（<!-- ○○ -->の部分が表示されないことや改行などの問題があります）のでファイル管理のファイル書き換えのみmarkItUp!を使用する方がいいと思います（その方がタブも使用できるし表示が見やすくて編集しやすいです）。

1. freo公式サイトの WYSIWYGではないHTMLエディタを導入する からfreo用のmarkItUp!をダウンロードしてアップします。
2. templates/internals/admin/header.html の

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}colorbox.css" type="text/css" media="all" />

   の下に、

   <link rel="stylesheet" href="{$freo.core.http_url}markitup/skins/simple/style.css" type="text/css" />
   <link rel="stylesheet" href="{$freo.core.http_url}markitup/sets/default/style.css" type="text/css" />

   を追加します。
   さらに、

   <script type="text/javascript" src="{$freo.core.http_url}tiny_mce/tiny_mce.js"></script>

   の下に、

   <script type="text/javascript" src="{$freo.core.http_url}markitup/jquery.markitup.js"></script>
   <script type="text/javascript" src="{$freo.core.http_url}markitup/sets/default/set.js"></script>

   を追加します。
3. templates/plugins/filemanager/admin_form.html の159行目あたりにある

   <dt>内容</dt>
     <dd><textarea name="plugin_filemanager[text]" cols="50" rows="10">{$input.plugin_filemanager.text}</textarea></dd>

   の部分を、

   <dt>内容</dt>
     <dd><textarea name="plugin_filemanager[text]" cols="65" rows="30" id="markitup">{$input.plugin_filemanager.text}</textarea></dd>

   に変更（緑字を赤字に）します。
4. js/admin.js の

   $(document).ready(function() {

   の下に、

     //markItUp!
     $('#markitup').markItUp(mySettings);

   を追加します。

   すると
   
   だったのが
   
   になります。