jquery 可调整大小阻止我编辑我的 div

Question

我正在尝试使可编辑的 div 可调整大小。我已经设法使 div 可编辑。我已经成功地调整了 div 的大小。我现在意识到它不再可编辑。

一些试验和错误表明这是由于可调整大小的库做了一些我不明白的事情。如果我使用元素检查器，我可以看到我输入的类型存储在 HTML 中，但它永远不可见。

var ele = document.getElementById("a");
$(ele).resizable();

div {
  width: 300px;
  height: 150px;
  background: white;
  border: solid 1px green;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div contenteditable="true">This is without JQuery and works great but doesn't resize.</div>
<div contenteditable="true" id="a"></div>

有人可以解释一下我需要做什么才能编辑我的 div 吗？

奇怪的是，如果我将内容编码到 DIV 中(例如 myElement.innerText = "hello world")，那么它是可编辑的，直到我删除所有代码，然后它再次显示为不可编辑

我创建了一个 JSFIDDLE来演示一下

Answer 1

使用此代码

<div contenteditable="true" >This is without JQuery and works great.
</div>
<div id="a">
<div style="width: 100%; height: 100%;" contenteditable="true">  
</div>
</div>