私はBootstrapプラグインの使用に関しては初心者です(コードアカデミー)...この素晴らしいブートストラップマークダウンプラグインしかし、それを適切にインストールできないため、から getContent と parseContent を呼び出すことができませんtextarea
。
もし助けていただけるなら、本当に感謝いたします。
これまでこれをやってきました(codecademyの例をモックアップ)
私が欲しいもの:
これまでやってきたこと
以下のライブラリ(jquery
、、、、)をbower経由でダウンロードし、これらのファイルをフォルダにコピーbootstrap
しましbootstrap-markdown
たto-bootstrap
markdown
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
(バージョン番号なし)
インデックス.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()
、経由で文字列を 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)
});