WEBOPIXEL

画像を選択してテキストエリアなどにパスを挿入するjQueryプラグイン(CodeMirror対応)

Posted: 2012.06.29 / Category: javascript / Tag: 

局地的にしか使用できませんが、管理画面などで画像一覧を表示させて選択するとテキストエリアにパスを挿入するプラグインです。
Code Mirrorというテキストエリアを快適にするプラグインに対応しています。

Sponsored Link

ダウンロード

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

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。