我已经修改了 markitup 附带的示例(查看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>
您在文本区域中设置光标位置,选择文本并单击链接“...添加内容...”。脚本只是将您选择的文本放入光标位置的 textarea 中。很抱歉使用document.getSelection() - 在 jQuery 中没有找到任何类似的实用函数 =)