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

2024-05-17

我是使用 Bootstrap 插件的新手（刚刚通过代码学院 http://www.codecademy.com/en/skills/make-an-interactive-website/）...我真的很想用这个很棒的引导 Markdown 插件 https://github.com/toopay/bootstrap-markdown但无法正确安装它，因此我可以从textarea.

如果你能帮助我，我将非常感激——非常感谢！

到目前为止我已经做到了（模拟来自codecademy的示例）

我想要的是：

到目前为止我做了什么

下载了以下库（jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown）通过 Bower 并将这些文件复制到js/vendor folder

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（无版本号）

索引.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-markdown API's .getContent() and .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');
  }
});

这很好。但我希望能够通过“发布”按钮进行访问。

我尝试过但没有运气：

var post;
$(".status-box").markdown( post = e.getContent() );

e仅代表 markdown 编辑onSave功能。

所以你必须获得 markdown 实例，我检查了插件，这是可能的（hacky 但可能:-)

如果您想在点击后功能中访问它，您必须通过以下方式访问它：

获取 markdown 元素
通过获取 Markdown 实例data('markdown')
use the parseContent功能

Code:

$(".btn-post").click(function (e) {
    post = $('.status-box').data('markdown').parseContent();
    console.log(post)
});

Demo: http://jsfiddle.net/IrvinDominin/fdpM4/ http://jsfiddle.net/IrvinDominin/fdpM4/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)