Как вызвать .getContent и .parseContent из bootstrap-markdown.js

Я новичок, когда дело доходит до использования плагинов Bootstrap (просто узнал об этом через codecademy)... Я действительно как использовать этот удивительный загрузочный плагин markdown, но не удается его правильно установить, поэтому я могу вызвать getContent и parseContent из textarea.

Если бы вы могли мне помочь, я бы очень признателен за это - много!

Я сделал это до сих пор (издеваясь над примером из codecademy)

Что я хочу:

Что я сделал до сих пор

Загрузили следующие библиотеки (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) через bower и скопировали эти файлы в папку 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 (без номера версии)

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>

Я действительно думаю, что это правильно установит плагин (моя первоначальная мысль заключалась в том, что я не установил плагин правильно, поэтому я не мог заставить его работать).

Но как мне получить контент из текстового поля через bootstrap-markdown API .getContent() и .parseContent() вместо того, чтобы использовать .getVal() и преобразовать строку в html через showdown?

До сих пор я могу это сделать

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

Это хорошо. Но я хочу получить доступ через кнопку "Почта".

Я пробовал без везения:

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/

Ответ 2

Загрузите файл bootstrap - markdown.js в рабочую среду. Проверьте ссылку файла bootstrap - markdown.js. В вашем коде может отсутствовать lib markdown.js.

UPDATE

HI @Norfeldt,

Для этого вам нужно следовать приведенным ниже инструкциям.

1. Проверьте версии совместимости между bootstrap.min.css и bootstrap.min.js. (Т. Е. Вы должны поддерживать same versions для обеих вещей.) Поскольку http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Ссылка содержит Bootstrap version 3.0 css и http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Ссылка содержит Bootstrap 2.3.2 version JS.

2.Содержание Корректный корневой путь каталога.

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

должен быть

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

3. Какую версию bootstrap-markdown.js lib вы используете.

Проверьте этот

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

Примечание. Загрузите загрузочные файлы из здесь добавьте в свой html файл.

Ответ 3

Изменить путь к файлу js

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

Для

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

Надеюсь, это поможет вам...