プレビューがすぐに表示されない

Question

ボタンをクリックすると、下のコードサンプルのハイパーリンクモーダルまたは画像挿入モーダルが開きます。

私はリンクや画像をうまく作成して挿入できます。

モーダルでリンクや画像を作成して保存すると、プレビューはすぐに表示されません。プレビューで新しい変更を確認するには、テキストエリアのキーを押す必要があります。

質問：私は、ブートストラップモーダル から新規ハイパーリンクや画像を追加し、どのように私は変更はすぐにプレビュー に表示を確認することができます[保存]をクリックします。 showdown.js

CODEPEN EXAMPLE

スクリプトを使用すると、

$("#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イベントをトリガjQueryの設定値がジャストcodepen上でテストされ、正常に動作します$("#message")

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

に設定された関連イベントのいずれかを引き起こさないように私は私はこのことができます願ってい

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

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

、想定し

!!