Question

当谈到使用Bootstrap插件时我是新手（刚刚通过codecademy了解到它）...我真的很想使用这个很棒的bootstrap markdown plugin但是无法正确安装它我可以从textarea调用getContent和parseContent。

如果你能帮助我，我会非常感激它 - 很多！

到目前为止，我已经完成了这项工作（模拟了codecademy中的示例）

我想要的是什么：

end goal

到目前为止我做了什么

通过bower下载以下库（jquery，bootstrap，bootstrap-markdown，to-bootstrap，markdown）并将这些文件复制到{{1文件夹

js/vendor（v2.1.1）
jquery.js（v3.1.1）
bootstrap.js（v2.5.0）
bootstrap-markdown.js（v0.4.1）
he.js（无版本号）
to-markdown.js（无版本号）

的index.html

markdown.js

我实际上认为这是正确安装插件（我最初的想法是我没有安装插件正确，这就是为什么我无法使其工作）。

但是如何通过<!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> API bootstrap-markdown和.getContent()从textarea获取内容，而不必使用.parseContent()并将字符串转换为html .getVal()？

到目前为止，我可以这样做

app.js

showdown

Currents

哪个好。但我希望能够通过Post按钮进行访问。

我没有运气试过：

$(".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');
  }
});

Answer 1

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/

Answer 2

您是否已将bootstrap-markdown.js文件下载到您的工作环境中。检查bootstrap - markdown.js文件的链接。您的代码中可能缺少markdown.js的lib。

<强>更新

HI @Norfeldt，

对于此，您必须遵循以下说明。

<强> 1 即可。检查bootstrap.min.css和bootstrap.min.js之间的兼容性版本。（即，您必须对这两件事保持same versions。）因为http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css链接包含Bootstrap version 3.0 css和{{3} }链接包含Bootstrap 2.3.2 version JS。

2 。保持正确的根目录路径。

<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>

必须

<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>

第3 即可。您正在使用哪个版本的bootstrap-markdown.js lib。

检查一下

Version                       Compatibility with Bootstrap
Bootstrap Markdown v2.x      only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x      only compatible with Bootstrap 2.x

注意：从http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js下载自举文件，将添加内容添加到您的html文件中。

Answer 3

更改这些js文件的路径

<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>

要

<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>

希望这会对你有帮助......

如何从bootstrap-markdown.js调用.getContent和.parseContent

我想要的是什么：

到目前为止我做了什么

的index.html

app.js

3 个答案: