Предварительный просмотр не отображается сразу

Question

Когда я нажимаю на кнопку на верхней части текстовой области, она открывает либо гиперссылку, либо мода вставки изображения, показанной в приведенном ниже примере кода.

Я могу создать и вставить ссылки и изображения в порядке.

Как всегда, когда я создаю ссылки или изображение и нажимаю save на модальном, предварительный просмотр не отображается сразу. Я должен нажать клавишу в текстовом поле, чтобы увидеть новые изменения в предварительном просмотре.

Вопрос: Когда я добавляю новую гиперссылку или изображение из моей начальной загрузки модальный и нажмите кнопку Сохранить, как я могу убедиться, что изменения отображаются в режиме предварительного просмотра сразу. Использование showdown.js

CODEPEN EXAMPLE

Script

$("#message").on('keyup paste copy change', function() { 
var text = document.getElementById('message').value, 
     target = document.getElementById('showdown'), 
     converter = new showdown.Converter({parseImgDimensions: true}), 
     html = converter.makeHtml(text); 

    target.innerHTML = html; 
}); 

Полный скрипт

$('#button-link').on('click', function() { 
    $('#myLink').modal('show'); 
}); 

$('#button-image').on('click', function() { 
    $('#myImage').modal('show'); 
}); 

$('#button-smile').on('click', function() { 
    $('#mySmile').modal('show'); 
}); 

$('#myLink').on('shown.bs.modal', function() { 
    var textarea = document.getElementById("message"); 
    var len = textarea.value.length; 
    var start = textarea.selectionStart; 
    var end = textarea.selectionEnd; 
    var selectedText = textarea.value.substring(start, end); 
    $('#link_title').val(selectedText); 
    $('#link_url').val('http://'); 
}); 

$('#myImage').on('shown.bs.modal', function() { 
    $("#image_url").attr("placeholder", "http://www.example.com/image.png"); 
}); 

$("#save-image").on('click', function(e) { 
    var textarea = document.getElementById("message"); 
    var len = textarea.value.length; 
    var start = textarea.selectionStart; 
    var end = textarea.selectionEnd; 
    var selectedText = textarea.value.substring(start, end); 
    var counter = findAvailableNumber(textarea); 

    var replace_word = '![enter image description here]' + '[' + counter + ']'; 

    if (counter == 1) { 

     if ($('input#image_width').val().length > 0) { 
      var add_link = '\n\n' + ' [' + counter + ']: ' + $('#image_url').val() + ' =' + $('input#image_width').val() + 'x' + $('input#image_height').val(); 
     } else { 
      var add_link = '\n\n' + ' [' + counter + ']: ' + $('#image_url').val(); 
     } 

    } else { 
     var add_link = '\n' + ' [' + counter + ']: ' + $('#image_url').val(); 
    } 

    textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link; 
}); 

$("#save-link").on('click', function(e) { 
    var textarea = document.getElementById("message"); 
    var len = textarea.value.length; 
    var start = textarea.selectionStart; 
    var end = textarea.selectionEnd; 
    var selectedText = textarea.value.substring(start, end); 
    var counter = findAvailableNumber(textarea); 

    if ($('#link_title').val().length > 0) { 
     var replace_word = '[' + $('#link_title').val() + ']' + '[' + counter + ']'; 
    } else { 
     var replace_word = '[enter link description here]' + '[' + counter + ']'; 
    } 

    if (counter == 1) { 
     var add_link = '\n\n' + ' [' + counter + ']: ' + $('#link_url').val(); 
    } else { 
     var add_link = '\n' + ' [' + counter + ']: ' + $('#link_url').val(); 
    } 

    textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link; 
}); 

function findAvailableNumber(textarea){ 
    var number = 1; 

    var a = textarea.value; 

    if(a.indexOf('[1]') > -1){ 

     //Find lines with links 

     var matches = a.match(/(^|\n)\s*\[\d+\]:/g); 

     //Find corresponding numbers 

     var usedNumbers = matches.map(function(match){ 
      return parseInt(match.match(/\d+/)[0]); } 
     ); 

     //Find first unused number 

     var number = 1; 

     while(true){ 

      if(usedNumbers.indexOf(number) === -1){ 

       //Found unused number 

       return number; 
      } 

      number++; 
     } 
    } 

    return number; 
} 

$("#message").on('keyup paste copy change', function() { 
var text = document.getElementById('message').value, 
     target = document.getElementById('showdown'), 
     converter = new showdown.Converter({parseImgDimensions: true}), 
     html = converter.makeHtml(text); 

    target.innerHTML = html; 
}); 

$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 

Answer 1

Просто вызвать keyup событие в конце $("#save-link").on('click', function(e) {});

Я предполагаю, что в качестве значения параметра Jquery не вызывает какой-либо из событий, связанных с установленными на $("#message")

$("#message").trigger('keyup'); 

Просто испытанной на codepen и работает отлично,

$("#save-link").on('click', function(e) { 
    //All your code 
    // .... 

    $("#message").trigger('keyup'); 
}); 

Я надеюсь, что это помогает !!