bootstrap-markdown.js から .getContent と .parseContent を呼び出す方法 質問する

bootstrap-markdown.js から .getContent と .parseContent を呼び出す方法 質問する

私はBootstrapプラグインの使用に関しては初心者です(コードアカデミー)...この素晴らしいブートストラップマークダウンプラグインしかし、それを適切にインストールできないため、から getContent と parseContent を呼び出すことができませんtextarea

もし助けていただけるなら、本当に感謝いたします。

これまでこれをやってきました(codecademyの例をモックアップ)

私が欲しいもの:

最終目標

これまでやってきたこと

以下のライブラリ(jquery、、、、)をbower経由でダウンロードし、これらのファイルをフォルダにコピーbootstrapしましbootstrap-markdownto-bootstrapmarkdownjs/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(バージョン番号なし)

インデックス.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-markdownAPI経由でテキストエリアからコンテンツを取得し.getContent()、経由で文字列を HTML に変換するにはどうすればよいでしょうか?.parseContent().getVal()showdown

今のところこの方法で取得できます

アプリ

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

ベストアンサー1

e関数内のみでマークダウン編集を表しますonSave

したがって、マークダウン インスタンスを取得する必要があります。プラグインを確認しましたが、可能です (ハッキーですが可能です :-)

投稿クリック機能内でアクセスしたい場合は、次の方法でアクセスする必要があります。

  • マークダウン要素を取得する
  • マークダウンインスタンスを取得するにはdata('markdown')
  • parseContent機能を使用する

コード:

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

デモ:http://jsfiddle.net/IrvinDominin/fdpM4/

おすすめ記事