0

こんにちは私はこれを使用しようとしています:http://www.codingdrama.com/bootstrap-markdown/ 。私はIonicフレームワークを使用しており、単一ページのWebアプリケーションで作業しています。ブートストラップ・マークダウンが機能しない

現在、私はウェブサイトからこの例を実行しています
<!-- JQuery --> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<!-- JQuery animated scrolling plugin --> 
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script> 
<!-- MARKDOWN --> 

<link href="css/bootstrap-markdown.min.css" rel="stylesheet">  

<!-- bootstrap --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

<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> 

<form> 
<input name="title" type="text" placeholder="Title?" /> 
<textarea name="content" data-provide="markdown" rows="10"></textarea> 
<label class="checkbox"> 
    <input name="publish" type="checkbox"> Publish 
</label> 
<hr/> 
<button type="submit" class="btn">Submit</button> 

残念ながら、結果はのようなものではありません これは私のindex.htmlのヘッダに含まれています例。予想される出力にも近くない空白のフォームが表示されます。 この例のインクルード(最初の4行):http://bootsnipp.com/snippets/99r9Dも試しました。しかし、私はまだ運がありません。このブートストラップ・プラグインの経験がある人なら誰でも助けてくれますか?

これは私が見たものである。 enter image description here

答えて

1

以下のスニペットを確認してください。許可の問題のため、私のために働いて、
Submitボタンがここで動作しない場合があります。 、
チェックボックスを適切に表示するためのいくつかの追加スタイルが追加されました。

.checkbox { 
 
    margin-left: 20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css" rel="stylesheet" /> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<form> 
 
    <input name="title" type="text" placeholder="Title?" class="form-control" /> 
 
    <textarea name="content" data-provide="markdown" rows="10"></textarea> 
 
    <label class="checkbox"> 
 
    <input name="publish" type="checkbox">Publish 
 
    </label> 
 
    <hr/> 
 
    <button type="submit" class="btn">Submit</button> 
 
    </form

+0

残念ながら、これは私のために働いていません。 – Ayudh

+0

@Ayudhただいまコンソールにエラーがありますか? (右クリック→要素の検査→コンソール) –

+1

エラーは表示されません – Ayudh

0

このcode.itは、プレビューで動作します試してみてください。

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css"> 
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script> 
<script src="https://use.fontawesome.com/f9b4728164.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="http://www.codingdrama.com/bootstrap-markdown/js/to-markdown.js"></script> 
<script src="http://www.codingdrama.com/bootstrap-markdown/js/markdown.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script> 



<form>  
    <textarea id="myEditor" name="content" data-provide="markdown" rows="10"> 
    </textarea> 
</form> 
関連する問題