マークアップに付属する例を修正しました ( Markitup! アーカイブのindex.htmlを参照してください)。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#markItUp').markItUp(mySettings);
$('.add').click(function() {
$.markItUp( { openWith:'<opening tag>',
closeWith:'<\/closing tag>',
placeHolder:document.getSelection()
}
);
return false;
});
});
</script>
<p>Click <a href="#" class="add">this link to insert content</a> from anywhere in the page</p>
<p>
<textarea id="markItUp" cols="80" rows="20">
<h1>Welcome on markItUp!</h1>
<p><strong>markItUp!</strong> is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own markup system can be easily implemented.</p>
</textarea>
</p>
</body>
</html>
テキストエリアにカーソル位置を設定し、テキストを選択して、リンク「...コンテンツを追加...」をクリックします。スクリプトは、選択したテキストをテキストエリアのカーソル位置に配置するだけです。document.getSelection()を使用して申し訳ありません- jQuery で同様のユーティリティ関数が見つかりません =)