如何在Gridster中以可编辑方式设置文本区域

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/gridster.js"></script>
<link rel="stylesheet" href="path/to/gridster.css">

<div id="gridster-container">
  <!-- Gridster布局将在这里生成 -->
</div>

$(function() {
  var gridster = $("#gridster-container").gridster({
    widget_base_dimensions: [100, 100], // 设置每个网格单元的基本尺寸
    widget_margins: [5, 5], // 设置网格单元之间的边距
    draggable: {
      handle: '.widget-header' // 设置可拖拽的区域，这里以.widget-header为例
    },
    resize: {
      enabled: true // 允许调整网格单元的大小
    }
  }).data('gridster');
});

var widget = '<li><div class="widget-header">可编辑文本区域</div><div class="widget-content" contenteditable="true">编辑文本内容</div></li>';
gridster.add_widget(widget, 1, 1); // 添加一个1x1大小的网格单元

.widget-header {
  background-color: #ccc;
  padding: 5px;
  cursor: move;
}

.widget-content {
  background-color: #fff;
  padding: 10px;
  min-height: 50px;
  border: 1px solid #ccc;
}