Mantisの改造・カスタマイズ　その５　コメント部分にショートカットキー

%[画像ID],ratexxって、記法を覚えたり、その通りに書かないと画像が表示されないというのは逆にストレスになっていました。
そこで、ボタン一発押せばテキストエリアに記法が入るという…Tracなどではおなじみのアレを作りました。

diff -r mantis/bugnote_add_inc.php mantisbt-1.2.15/bugnote_add_inc.php
49,185c49
< <script type="text/javascript">
< <!--
< 
<   window.onload = function(){
<     range      = '';
<     intervalID = '';
<     var get_textarea_selected = function (e){
<       var selected_obj  = document.activeElement;
< 
<       var shift_key = e.shiftKey;
<       var alt_key   = e.altKey;
<       var key_code  = e.keyCode;
<       var key_type  = e.type;
< 
<       switch(true){
<         // ALT + P pre tag
<         case (alt_key) && (key_code == 80) && (key_type == "keydown") :
<           insert_textarea("pre");
<         break;
< 
<         // ALT + B blockquote tag
<         case (alt_key) && (key_code == 66) && (key_type == "keydown") :
<           insert_textarea("blockquote");
<         break;
< 
<         case (!alt_key):
<           return;
<         break;
< 
<       } // switch
< 
< 
<     } // f get_textarea_selected
< 
< 
<     //document.getElementById("bugnote_text").addEventListener("mouseup", get_textarea_selected, false);
<     document.getElementById("bugnote_text").addEventListener("keydown", get_textarea_selected, false);
<     //document.getElementById("bugnote_text").addEventListener("keyup",   get_textarea_selected, false);
< 
<   } // window onload
< 
<   function insert_textarea(tags){
<     var return_flg = false;
<     var text_area_obj = document.getElementById("bugnote_text");
<     text_area_obj.focus();
< 
<     var selected_obj  = document.activeElement;
<     if(selected_obj.selectionStart <= selected_obj.selectionEnd ){
<       string_start = selected_obj.selectionStart;
<       string_end   = selected_obj.selectionEnd;
<     } else {
<       string_start = selected_obj.selectionEnd;
<       string_end   = selected_obj.selectionStart;
<     } // if 
< 
<     before_range  = selected_obj.value.substring(
<                     0, string_start);
<     range         = selected_obj.value.substring(
<                     string_start , string_end);
<     after_range   = selected_obj.value.substring(
<                     string_end );
< 
<     /* debug
<       console.log(e);
<       console.log("string_start:" + string_start);
<       console.log("string_end:" + string_end);
<       console.log("before_range:" + before_range);
<       console.log("range:" + range);
<       console.log("after_range:" + after_range);
<       console.log("text_num:" + (range.match(/\r\n|\n/g)||[]).length);
<     */
<     // 改行数の確認
<     
<     if( 1 < (range.match(/\r\n|\n/g)||[]).length ){
<       return_flg = true;
<     } // if match
< 
<     switch(tags){
<       case 'pre':
<         before_insert_tag = '<pre>';
<         after_insert_tag  = '＜/pre>';
<       break;
< 
<       case 'blockquote':
<         before_insert_tag = '<blockquote>';
<         after_insert_tag  = '</blockquote>';
<       break;
< 
<       case 'code':
<         before_insert_tag = '<pre><code class="">';
<         after_insert_tag  = '</code>＜/pre>';
<       break;
< 
<       case 'strong':
<         before_insert_tag = '<strong>';
<         after_insert_tag  = '</strong>';
<       break;
< 
<       case 'em':
<         before_insert_tag = '<em>';
<         after_insert_tag  = '</em>';
<       break;
< 
<       case 'image':
<         before_insert_tag = '\n%[],rate100';
<         after_insert_tag  = '';
<       break;
<   
<     } // switch
< 
<     if(return_flg){
<       text_area_obj.value = before_range + before_insert_tag + '\n' + range + after_insert_tag + '\n' + after_range ; 
<       var CaretPosition = string_start + before_insert_tag.length + range.length + after_insert_tag.length + 1;
<     }else{
<       text_area_obj.value = before_range + before_insert_tag + range + after_insert_tag + after_range ; 
<       var CaretPosition = string_start + before_insert_tag.length + range.length + after_insert_tag.length ;
<     } // if return_flg something
< 
<     if(!range){
<       text_area_obj.value = before_range + before_insert_tag + '\n' + after_insert_tag + '\n' + after_range ; 
<       var CaretPosition = string_start + before_insert_tag.length + 1;
<     } // if range noting
< 
<     text_area_obj.setSelectionRange( CaretPosition , CaretPosition);
< 
<   } // f insert_textarea
< 
< // -->
< </script>
<                 <input type="button" value="pre(ALT+P)" style="margin-left: 10px;background-color: GhostWhite;" onclick="insert_textarea('pre')">
<                 <input type="button" value="blockquote(ALT+B)" style="margin-left: 10px; background-color: FloralWhite;" onclick="insert_textarea('blockquote')">
<                 <input type="button" value="code" style="margin-left: 10px;" onclick="insert_textarea('code')">
<                 <input type="button" value="strong" style="margin-left: 10px;color: red;font-weight: bold;" onclick="insert_textarea('strong')">
<                 <input type="button" value="em" style="margin-left: 10px;color: blue;font-style: italic;" onclick="insert_textarea('em')">
<                 <input type="button" value="image" style="margin-left: 10px;" onclick="insert_textarea('image')"><br>
<               <textarea name="bugnote_text" id="bugnote_text" cols="120" rows="30"></textarea>
< 
---
>               <textarea name="bugnote_text" cols="80" rows="10"></textarea>

こんな感じです。Wordpressに張り付けると動きそうなのでためしに…やってみます。







複数行をハイライトしてからALT+Pとかやると、上下にタグが入ります。
単一行（改行を含まない）とかだと左右にタグが入ります。

※Wordpress内に自作jsを読み込ませるのは面倒でした…
結局、_inc/hooks.phpに

wp_enqueue_script( 'xclusive-mantis', get_template_directory_uri() . '/_js/mantis.js', false , $theme->version, true );

これを書いてようやく読み込んだり。

関連記事:

  1. Mantisの改造・カスタマイズ　その４　コメントに画像貼り付け機能
  2. Mantisの改造・カスタマイズ　その２　利用許可タグを追加。
  3. Mantisの改造・カスタマイズ　その１　基本設定
  4. Mantisの改造・カスタマイズ　その３　プラグイン