如何从bootstrap-markdown.js调用.getContent和.parseContent
Nor*_*ldt 20 css markdown twitter-bootstrap
在使用Bootstrap插件时我是新手(刚刚通过codecademy了解它)...我真的想使用这个很棒的bootstrap markdown插件但是无法正确安装它所以我可以从中调用getContent和parseContent textarea.
如果你能帮助我,我会非常感激它 - 很多!
到目前为止我已经完成了这个(从codecademy中嘲笑示例)
我想要的是:
到目前为止我做了什么
下载了以下库(jquery,bootstrap,bootstrap-markdown,to-bootstrap,markdown通过亭子)和复制的这些文件到js/vendor文件夹
jquery.js(V2.1.1)bootstrap.js(V3.1.1)bootstrap-markdown.js(V2.5.0)he.js(v0.4.1)to-markdown.js(没有版本号)markdown.js(没有版本号)
的index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
<a href="#" class="btn btn-primary btn-post">Post</a>
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
我实际上认为这正确安装插件(我最初的想法是我没有安装插件正确,这就是为什么我无法使其工作).
但是如何通过bootstrap-markdownAPI 从textarea获取内容.getContent(),.parseContent()而不是必须使用.getVal()并将字符串转换为html通过showdown？
到目前为止,我可以这样做
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
这很好.但我希望能够通过Post按钮进行访问.
我没试好运行:
var post;
$(".status-box").markdown( post = e.getContent() );
Irv*_*nin 13
e仅代表onSave函数内部的降价编辑.
所以你必须得到降价实例,我检查了插件,这是可能的(hacky但可能:-)
如果您想在点击后功能中访问它,您必须以这种方式访问它:
- 获得降价元素
- 通过获取降价实例
data('markdown') - 使用该
parseContent功能
码:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
演示:http://jsfiddle.net/IrvinDominin/fdpM4/