ダウンロード

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行目あたりを修正してください。