当url被克隆到文本区域时，实时url预览不起作用

Question

我正在建立一个Humhub内部网网站。

我正在使用jquery plugin liveurl创建在评论框中输入的url的实时预览。

Humhub评论区是一个可编辑的div，它的内容被克隆到一个隐藏的文本区。

<textarea style="width: 300px; height: 100px;" placeholder="write here"></textarea>
<div class="input-area" style="width: 300px; height: 100px; border:1px solid #CCC;" contenteditable="true"></div>

Humhub使用下面的jquery将内容克隆到文本区域。

$(document).ready(function () {
                            $('.input-area').keyup(function () {
                                if ($(this).html() == "" || $(this).html() == " " || $(this).html() == " <br>") {
                                        $(this).html(placeholder);
                                        $(this).addClass('atwho-placeholder');
                                } else {
                                        $('textarea').val(getPlainInput($(this).clone()));



                                }
                        })  

当在div.input-area中输入一个url时，它会被克隆到textarea中，但liveurl插件什么也不做。我从liveurl插件站点得到的代码如下所示。

$('textarea').liveUrl({
                            loadStart : function(){
                                    console.log('start');
                            },
                            loadEnd : function(){
                                    console.log('finished');
                            },
                            success : function(data) 
                            {  
                                console.log(data);
                                // this return the first found url data
                            }
                        });

当我直接在文本区域中输入url时，succes函数被正确执行，并且data attr包含正确的信息。

有人可以帮助我或有人有其他解决方案来创建一个现场网址预览？？

Answer 1

jquery liveurl期望在textarea上触发keyup事件。将内容从contenteditable div克隆到textarea只会复制内容，而不会触发keyup。你可以在克隆后尝试触发keyup。Working demo

$(document).ready(function () {
    $('.input-area').keyup(function () {
            $('textarea').val($('.input-area').html()).trigger('keyup');

    })
});