jquery resizable阻止我编辑我的div

时间:2018-02-05 15:29:58

标签: jquery

我试图让可编辑的div可调整大小。我设法使div可编辑。我设法使div可以调整大小。我现在意识到它已不再可编辑了。

一个小小的试验和错误表明这是由于可调整大小的图书馆做了一些我不明白的事情。如果我使用元素检查器,我可以看到I类型存储在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>
&#13;
&#13;
&#13;

有人可以解释我需要做什么,以便我可以编辑我的div吗?

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

我创建了JSFIDDLE来演示

1 个答案:

答案 0 :(得分:2)

使用此鳕鱼

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