jQueryUIportlet中的可编辑内容

我正在尝试创建具有可编辑内容（例如文本区域或选择框）的jquery ui Portlet。 到目前为止我没有成功

我尝试将portlet设置为“contenteditable”，如下所示：

<div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content" contenteditable="true">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</div>
</div>

新闻
我爱你，我爱你，我爱你。。。

然后，portlet内容可以通过剪切和粘贴内容进行更改，但不能通过键盘进行更改

我还尝试添加一个文本区域：

<div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">
        <textarea>bla bla bla</textarea>
    </div>
</div>

喂养
呜呜呜呜

同样，文本区域可以通过剪切和粘贴内容来改变，但不能通过键盘

我没有找到任何这样的例子。这可能吗

---

如果有人知道如何在没有jquery ui的情况下做到这一点，我很乐意了解这一点。

我自己通过以下方法找到了解决方案：

javascript:

    // handle autogrow editable areas in portlets
    $(".autogrow").editable(function(value, settings) { 
         console.log(this);
         console.log(value);
         console.log(settings);
         return(value);
      }, { 
         indicator : "Saving...",
         tooltip   : "Click to edit...",
         type      : 'autogrow',
         submit    : 'OK',
         cancel    : 'cancel',
         autogrow : {
               lineHeight : 16,
               minHeight  : 32
            }
    });

html:

表自动增长portlet
portlet内部的可编辑文本区域

唯一的问题是，我仍然有，它是不可能把文本光标放在正确的位置进行编辑，点击它的位置与鼠标。进入编辑模式后，只能使用键盘移动文本光标。 对于Portlet之外的自动增长区域，这是不同的。 如果有人知道如何解决这个问题

更新： 我终于找到了上一个问题的简单原因（无法放置光标） 通过在Portlet中的表区域内单击鼠标）： 只是不要像官方文件中那样使用“disableSelection（）”

$（函数（）{
$（“.column”）.sortable({
连接到：“.column”
});
$（“.portlet”）.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“ui小部件标题ui角点全部”）
.prepend（“”）
(完)
.find（“.portlet内容”）；
$（“.portlet头.ui图标”）。单击（函数（）{
$（this）.toggleClass（“ui图标厚度”）.toggleClass（“ui图标厚度”）；
$（this.parents（“.portlet:first”）.find（“.portlet内容”）.toggle（）；
});
//注释掉：$（“.column”）.disableSelection（）；
});

    <div class="portlet">
      <div class="portlet-header">jeditable autogrow portlet</div>
      <div class="portlet-content" >
        <div>
          <pre class="autogrow" id="paragraph1">
          editable text area inside of portlet
          </pre>
        </div>
      </div>
    </div>

$(function() {
    $( ".column" ).sortable({
        connectWith: ".column"
    });

    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find( ".portlet-content" );

    $( ".portlet-header .ui-icon" ).click(function() {
        $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
        $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });

    //COMMENT THIS OUT: $( ".column" ).disableSelection();
});