Question

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

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

Humhub评论区域是一个可编辑的div，其内容被克隆到隐藏的textarea。

<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将内容克隆到textarea。

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

当我在textarea中直接输入url时，succes函数正确执行，数据attr包含正确的信息。

有人可以帮助我，还是有其他人可以创建实时网址预览？

Answer 1

jquery liveurl期望在textarea上触发一个keyup事件。将内容从contenteditable div克隆到textarea只会复制内容但不会触发keyup。您可以尝试在克隆后触发键盘。 Working demo

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

    })
});

将url克隆到textarea时，实时URL预览不起作用

1 个答案: