20

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:

end goal

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

Currents

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() );
Community
  • 1
  • 1
Norfeldt
  • 8,272
  • 23
  • 96
  • 152
  • +1 For finding the library, I've been wanting a good Markdown editor. As for your question, I have no idea but will likely try out the library tonight. Can you post the full code for the text area you're using, ex: `` – mason Jul 28 '14 at 20:50
  • @mason I have now added the full code. – Norfeldt Jul 29 '14 at 04:35
  • You're using an awfully old version of jQuery. You might consider upgrading. Also, I installed bootstrap markdown on my site last night and noticed the Preview wasn't working. [This question](http://stackoverflow.com/questions/21435164/preview-button-not-working-of-toopay-bootstrap-markdown) solved my problem. Have you tried accessing the site via multiple browsers? – mason Jul 29 '14 at 13:45
  • @mason I'm using Aptana to develop the site.. but I'm really lost on howto use bower and implement it.. Have tried several different things.. – Norfeldt Jul 29 '14 at 20:18
  • I don't understand the first code part in the question you refer to. Is this something I call when document is ready? – Norfeldt Jul 29 '14 at 20:23
  • You just need to look at the answer in the question I linked to, and at the answer chandu posted. Make sure you have `markdown.js` and `to-markdown.js` referenced in your code. – mason Jul 29 '14 at 20:27
  • @mason I'm a complete newbie when it comes to building interactive website - so please bear with me. I have added a more detailed update of my question. I hope this show you where I'm stuck. – Norfeldt Jul 30 '14 at 09:51
  • Do not post your entire codebase. Instead, learn how to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) – mason Jul 30 '14 at 12:17
  • Please try to remove some of the updates and combine it into a shorter, more readable question with a clear question – Zach Saucier Aug 02 '14 at 16:07
  • @ZachSaucier That is now done – Norfeldt Aug 02 '14 at 18:33
  • @mason, v1.11.1 is the latest version of jquery on the v1 codepath, certainly not "awfully old".. (*the only defference is support for ie6/7/8*) – Gabriele Petrioli Aug 03 '14 at 08:57
  • @Norfeldt I think I found a solution, check my answer – Irvin Dominin Aug 03 '14 at 11:54
  • @Norfeldt can you please have a look at my question: http://stackoverflow.com/questions/26897426/rails-bootstrap-markdown-gem-not-parsing-to-html-on-save – Vlad Otrocol Nov 12 '14 at 22:43
  • @Norfeldt is the plugin supposed to submit the parsed version by default or do I have to do that manually in javascript? I want to mention that i am trying to use the standard code given as an example on the docs webpage only in erb format and i do not wish to access any content outside of the form itself. I only need it for the post action. Thank you – Vlad Otrocol Nov 12 '14 at 22:45
  • @VladOtrocol not sure I understand your question. Try to play around with Irvin's answer. – Norfeldt Nov 13 '14 at 12:33
  • Why not aiming for a more simplified layout, like what we have here in SO or discourse? I mean, at least drop that repeated bottom-left box there! ;P – cregox Jul 21 '15 at 12:27

3 Answers3

13

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/

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
3

Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.

UPDATE

HI @Norfeldt,

For This you have to follow Below Instructions.

1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.

2.Maintain Correct root Directory path. 

<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>

must be 

<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>

3. Which version of bootstrap-markdown.js lib you are using.

Check this one 

Version                       Compatibility with Bootstrap
Bootstrap Markdown v2.x      only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x      only compatible with Bootstrap 2.x

Note: Download bootstrap files from Here add add to your html file.

chandu
  • 2,276
  • 3
  • 20
  • 35
  • I downloaded the zip and copied the .js file (`bootstrap - markdown.js`) into my own js folder. Did the same for the (css) folder. I didn't touch the less and locale folders in the zip.. – Norfeldt Jul 29 '14 at 06:33
  • I have made an update to the question - hope this shows my problem more clearly. – Norfeldt Jul 30 '14 at 09:53
  • did as you described. Copied the .js files to the js/vendor folder. Made the `` in the order `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) and lastly `js/app.js`. I also made new stylesheet links to `bootstrap.css` and `bootstrap-markdown.min.css` in the header. It is still not working.. now the Preview isn't event working - it just shows a single string.. – Norfeldt Jul 31 '14 at 13:38
  • First add the JQuery.js script file all of above. – chandu Jul 31 '14 at 14:29
  • Added it to the `` instead of the end of the body. I actually moved all ` – Norfeldt Jul 31 '14 at 14:49
  • I realized that I forgot to put the `markdown.js` into the `vendor` folder... so now the `preview` button is now working again. But I still can't get the content (as plain text or html) from the `textarea` by clicking the `Post` button. – Norfeldt Aug 02 '14 at 15:30
0

Change path of these js file

<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>

To

<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>

Hope this will help you...

Gurpreet Singh
  • 5
  • 4