Question

当我点击textarea顶部的按钮时，它会打开下面的codepen示例中显示的超链接模式或图像插入模式。

我可以创建和插入链接和图像。

当我创建链接或图像并单击“保存模式”时，预览不会立即显示我必须按下textarea中的某个键以查看预览中的新更改。

问题：当我从我的引导程序模式中添加新的超链接或图像时并单击“保存”如何确保更改显示在预览中马上。使用 showdown.js

脚本

$("#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');
});

我希望这会有所帮助!!

预览不会立即显示

1 个答案: