Реализация предварительного просмотра для текста уценки

Использование markdown.js и/или showdown должен работать. Вот StackO с тем же вопросом и ответом. Я лично использовал showdown в приложении Ember, прежде чем отображать предварительный просмотр текста в режиме реального времени по мере его ввода (через двустороннюю привязку данных), и он работал безупречно.

В скрипке ниже я написал небольшой анализатор Showdown, который принимает строку уценки, разбивает ее на новую строку (возвращает массив тегов) и выполняет итерацию по массиву. На каждой итерации он удаляет теги, проверяет длину результирующей строки, а затем сравнивает ее с максимальным количеством символов для предварительного просмотра. Как только следующая итерация превысит максимальное количество символов, она вернет предварительный просмотр. Цикл do гарантирует, что вы всегда получите хотя бы один блок html в качестве предварительного просмотра.

Скрипка

$(function() {
  var converter = new Showdown.converter();
  var previewMax = 200;

  $('button').click(function() {        
    var content = $('#markdown').val(),
        charCount = 0,
        i = 0,
        output = '';

    if (!content) {
      return $('div.preview').html("Please enter some text.");
    }

    var mark = converter.makeHtml(content);
    var mark_arr = mark.split('\n');

    while (charCount < previewMax) {
      var html = mark_arr[i];
      var text = htmlStrip(html);            

      if ((charCount + text.length) > previewMax) {
        var overflow = (charCount + text.length) - previewMax;
        var clipAmount = text.length - overflow;
        html = jQuery.truncate(mark_arr[i], { length: clipAmount });
        }

      output += html;
      charCount += text.length;
      i++;
    };

    $('div.preview').html(output);
    $('div.full').html(mark);
  });

  function htmlStrip (html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    var text = div.textContent || div.innerText || "";
    return text;
  }
});

ПЕРЕСМОТР

Я обновил функцию, используя jQuery Truncate, чтобы разрезать окончательную строку на многоточие, чтобы все ваши предварительные просмотры были той же длины, что и остальные. Кроме того, я понял, что исходная функция возвращала длинную строку undefined снова и снова, когда текст не был введен, поэтому есть проверка, чтобы исключить это. Поскольку теперь этот цикл всегда будет возвращать хотя бы один элемент html, я заменил цикл do на цикл while для облегчения чтения. Наконец, если вы хотите, чтобы ваше усечение всегда заканчивалось на границе слова, передайте параметр words: true при его вызове. Очевидно, что это не даст вам одинаковый уровень усечения для каждого предварительного просмотра, но улучшит читаемость. Вот и все!

Я хочу поделиться своей предварительной версией, это было довольно просто с showdown.js и prism.js подсветка синтаксиса.

Prism.js легко использует синтаксис JavaScript и CSS. Все, что вам нужно, это выбрать определенные языки и загрузить их в папку с ресурсами. Или вы можете указать его для конкретных страниц.

Это произойдет в режиме предварительного просмотра в реальном времени в форме.

В форме Rails:

<div class="col-md-12">
  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_area :body, class: "form-control", rows: 10 %>
  </div>
</div>


<div class="col-md-12">
  <h1> Preview Markdown </h1>
  <div class="form-group markdownOutput"></div>
</div>

И добавьте этот скрипт прямо под страницей формы.

<script>
function mkdown(){
  var converter  = new showdown.Converter(),
      $post_body = $("#post_body");

  // This line will keep adding new rows for textarea. 
  function postBodyLengthDetector(post_body){
    var lines = post_body.val().split("\n");
    post_body.prop('rows', lines.length+5);
  }


  // Textarea rows in default '10', when focusing on this. It will expand. 
  $post_body.focus(function(){
    postBodyLengthDetector($(this));
    $('.markdownOutput').html(converter.makeHtml($post_body.val()));
  });

  // All simple magic goes here, each time when texting anything into textarea
  //it will be generated to markdown. You are able to see preview right below of textarea.
  $post_body.keyup(function() {
    postBodyLengthDetector($(this));
      var value = $( this ).val(),
          html  = converter.makeHtml(value);
          $('.markdownOutput').html(html);
  });
}
$(mkdown);
$(document).on("turbolinks:load", mkdown);
</script>