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



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

我使用jquery插件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时,它会被克隆到文本区域,但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时,successs函数将正确执行,并且数据属性包含正确的信息。

有人能帮我吗?或者有人有其他解决方案来创建实时url预览吗??

jquery liveurl期望在文本区域触发一个keyup事件。将内容从contenteditablediv克隆到textarea只会复制内容,但不会触发keyup。您可以在克隆后尝试触发keyup。工作演示
$(document).ready(function () {
    $('.input-area').keyup(function () {
            $('textarea').val($('.input-area').html()).trigger('keyup');
    })
}); 

最新更新