ダウンロード

Githubからダウンロードしてください。

jQuery.MediaSelect

準備

画像を一覧表示するhtmlを作ります。
基本的にBootstrapなマークアップにしています。

media-list1.html
<section id="media-list">
  <table class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th></th>
        <th>ID</th>
        <th>Title</th>
        <th>Image</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a class="insert"><i class="icon-plus"></i> Insert</a></td>
        <td>1</td>
        <td>test1</td>
        <td><a href="img/5_original.jpg"><img alt="2_thumb" src="img/5_original.jpg" /></a></td>
      </tr>
      ・・・
    </tbody>
  </table>
  <div class="pagination">
    <ul>
      <li class="active"><a href="#">1</a></li>
      <li><a href="media-list2.html">2</a></li>
      <li><a href="media-list2.html">Next</a></li>
    </ul>
  </div>
</section>

次に、テキストエリアの設置するhtmlを作成します。

index.html
<div class="control-group">
  <label class="control-label">Textarea</label>
  <div class="controls"><textarea class="input-xxlarge" cols="40" id="disc-textarea" name="article[discription]" rows="5"></textarea></div>
  <button class="btn" id="disc-insert-btn"><i class="icon-picture"></i> Media Select</button>
</div>

呼び出し方

イベントになるボタンを選択して、オプションには「insertObj」で挿入するテキストエリアを指定します。

index.html
$('#thum-insert-btn').mediaSelect({
  insertObj: '#thum-field'
});

「loadFile」オプションで最初に読み込むファイルを変更できます。

index.html
$('#thum-insert-btn').mediaSelect({
  insertObj: '#thum-field',
  loadFile : 'media-list1.html'
});

CodeMirrorの場合はそのままオブジェクトを入れます。

index.html
var meditor = CodeMirror.fromTextArea( .....
$('#mediaBtn').mediaSelect({
  insertObj: meditor
});

ウィンドウの見出しとかは直書きしちゃってるので、jsの30行目あたりを修正してください。