我如何弄清楚为什么contenteditable属性不起作用？

Question

我似乎遇到了一些我的css / javascript问题。我似乎无法使用contentEditable在我的webapp中工作。我受到了this post的答案的启发，尝试了这种方法。

我已经测试了我的浏览器here，它运行正常。

我应该注意哪些css规则可能导致它不起作用？我可以选择对象（它突出显示div）但我无法编辑/追加/删除对象中的任何文本。

我还确保document.designMode = "on"

不幸的是，它是一个内部应用程序，所以我无法获得每个人尝试的链接。

- EDIT--
代码按要求截取

<div id="textarea_textObject0_preview_container" class="te_preview" style="width: 650px; height: 365px; overflow-x: hidden; overflow-y: hidden; text-align: left; background-image: url(http://172.18.4.249/workspace/tc-a/web/style/images/bgrid.jpg); ">
<div style="display: inline-block; position: relative; cursor: move; font-weight: normal; font-style: normal; text-decoration: none; left: 170px; top: 129px; " class="ui-draggable" contenteditable="true">Start Text</div>
</div>

chrome报告了一些CSS参数：

Answer 1

不确定哪些样式规则可能搞砸了，但要想出来，首先我会尝试检查Firebug中的页面，突出显示您的contenteditable元素，然后一次关闭该元素的样式规则一个选择器直到它开始工作。

Answer 2

我看到你正在使用jquery UI类＆＃34; ui-draggable＆＃34;在你的contenteidtable div。这可能是一个问题，因为可拖动的默认情况下像textareas一样可以编辑可编辑的内容。如果从js中使div可拖动并指定选项，则可以避免：

$('div').draggable({
    cancel: 'div'
}

以下是draggable options

的详细信息