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

本文介绍了如何从bootstrap-markdown.js调用.getContent和.parseContent的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是一个新手，当谈到使用Bootstrap插件（只是通过

I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.

If you could help me I would really appreciate it it - a lot!

I have done this so far (mocking up the example from codecademy)

What I want:

What I did so far

Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the 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 (no version number)
markdown.js (no version number)

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>

I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).

But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?

So far I can get it this way

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');
  }
});

Which is good. But I want to be able to access via the Post button instead.

I tried without luck:

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

解决方案

e represent the markdown edit only inside the onSave function.

So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)

If you want to access it inside your post click function you have to access it in this way:

get the markdown element
get the markdown instance via data('markdown')
use the parseContent function

Code:

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

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

这篇关于如何从bootstrap-markdown.js调用.getContent和.parseContent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！