jquery ui portlet 中的可编辑内容

Question

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

我尝试使 portlet 成为“内容可编辑”，如下所示：

<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 的情况下做到这一点，我很乐意了解这一点。

Answer 1

我自己使用 jeditable 找到了解决方案：

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:

    <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>

我仍然遇到的唯一问题问题是无法通过用鼠标单击文本光标来将其放置到正确的位置进行编辑。进入编辑模式后，您只能使用键盘移动文本光标。
对于 portlet 之外的自动增长区域来说，情况有所不同。
如果有人提示如何解决这个问题？

更新：
我终于找到了最后一个问题的简单原因（无法将光标放置在
通过在 portlet 中的可编辑区域内单击鼠标）：
只是不要使用官方 portlet 演示 中使用的“disableSelection()”。

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