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

标签 css twitter-bootstrap markdown

我是使用 Bootstrap 插件的新手(刚刚通过 codecademy 了解它)...我真的很想使用这个很棒的 bootstrap markdown plugin但未能正确安装它,所以我可以从 textarea 调用 getContent 和 parseContent。

如果您能帮助我,我将不胜感激 - 非常感谢!

到目前为止我已经这样做了(模拟来自 codecademy 的例子)

我想要的:

end goal

到目前为止我做了什么

下载了以下库(jquerybootstrapbootstrap-markdownto-bootstrapmarkdown) 通过 bower 并将这些文件复制到 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-markdown API 的 .getContent().parseContent() 从文本区域获取内容必须使用 .getVal() 并通过 showdown 将字符串转换为 html?

到目前为止,我可以通过这种方式得到它

应用程序.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');
  }
});

Currents

哪个好。但我希望能够通过“发布”按钮访问。

我尝试过但没有成功:

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

最佳答案

e 表示仅在onSave 函数内进行 Markdown 编辑。

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

如果您想在点击后功能中访问它,您必须以这种方式访问​​它:

  • 获取markdown元素
  • 通过data('markdown')获取markdown实例
  • 使用parseContent 函数

代码:

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

演示:http://jsfiddle.net/IrvinDominin/fdpM4/

关于css - 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25004007/

相关文章:

javascript - twentytwenty js | <img> 的定位

html - 侧边栏元素看起来像是主要内容的一部分。如何实现这种悬停效果?

html - 使点击的图像具有样式

java - 仅在 GWT2.0 布局/uibinder 世界中使用 css 在屏幕上居中对象

Javascript : store an image in the browser, 然后在 Markdown 中使用它

javascript - 如何使用 jquery 将“查看更多”按钮添加到 Bootstrap 图像库

html - Bootstrap 4 布局,标题上方有卡片

css - anchor 鼠标指针不适用于 CSS 和 Bootstrap

documentation - 有没有翻译 Markdown 格式文本的方法?

java - 任何 java markdown 库都支持 github 语法?