Как выяснить, почему атрибут 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> 

Некоторые из параметров CSS представлены хромом:

Answer 1

Не уверен, экспромтом, какой стиль правила может винт вещи , но, чтобы понять это, сначала попробую проверить страницу в Firebug, выделить свой контентный элемент, а затем отключить правила стилей для этого элемента один селектор за раз, пока он не начнет работать.

Answer 2

Я вижу, что вы используете jQuery UI класс «ui-draggable» на вашем contenteidtable div. Это может быть проблемой, поскольку draggable позволяет редактировать редактируемый контент, например textareas. Этого можно избежать, если вы сделаете ваш DIV перетаскиваемым из JS и опция:

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

Вот более подробной информации о draggable options