我是一个新手,当涉及到使用Bootstrap插件(刚刚通过
codecademy了解)…我真的想使用这个很棒的
bootstrap markdown plugin,但无法正确安装它,所以我可以从文本区域调用getContent和parseContent。
@H_404_2@如果你能帮助我,我真的很感激它 – 很多!
@H_404_2@我已经做到了这一点(嘲笑编解码器的例子)
@H_404_2@我想要的是:
@H_404_2@我到目前为止做了什么
@H_404_2@通过bower下载以下libs(jquery,bootstrap,bootstrap-markdown,to-bootstrap,markdown),并将这些文件复制到js / vendor文件夹
@H_404_2@> 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(无版本号) @H_404_2@的index.html
> bootstrap.js(v3.1.1)
> bootstrap-markdown.js(v2.5.0)
> he.js(v0.4.1)
> to-markdown.js(无版本号)
> markdown.js(无版本号) @H_404_2@的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>@H_404_2@我实际上认为这是正确的安装插件(我最初的想法是,我没有安装插件正确,这是为什么我无法使它的工作)。 @H_404_2@但是如何通过bootstrap-markdown API的.getContent()和.parseContent()获取textarea中的内容,而不是使用.getVal()并通过showdown将该字符串转换为html? @H_404_2@到目前为止,我可以这样做 @H_404_2@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'); } });@H_404_2@哪个是好的但是我想通过“发布”按钮可以访问。 @H_404_2@我试过没有运气:
var post; $(".status-Box").markdown( post = e.getContent() );
解决方法
e代表onSave功能中的markdown编辑。
@H_404_2@所以你必须得到markdown实例,我检查了插件,这是可能的(可恶的但可能的:-)
@H_404_2@如果你想在你的帖子点击功能中访问它,你必须以这种方式访问它:
@H_404_2@>获取markdown元素
>通过数据(‘markdown’)获取markdown实例
>使用parseContent函数 @H_404_2@码:
>通过数据(‘markdown’)获取markdown实例
>使用parseContent函数 @H_404_2@码:
$(".btn-post").click(function (e) { post = $('.status-Box').data('markdown').parseContent(); console.log(post) });@H_404_2@演示:http://jsfiddle.net/IrvinDominin/fdpM4/