Как выяснить, почему атрибут contenteditable не работает?

Question

Кажется, у меня проблема с некоторыми из моих css / javascript.Кажется, я не могу заставить contentEditable работать в моем веб-приложении.Я был вдохновлен ответом на этот пост , чтобы попробовать этот метод.

Я протестировал мой браузер здесь , и он отлично работает.

Существуют ли какие-либо правила CSS, о которых я должен знать, которые могут привести к тому, что они не будут работать?Я могу выбрать объект (он выделяет div), но я не могу редактировать / добавлять / удалять любой текст в объекте.

Я также убедился, что document.designMode = "on"

К сожалению, этовнутреннее приложение, поэтому я не могу получить ссылки для всех попробовать.

- РЕДАКТИРОВАТЬ -Код отправлен по запросу

<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 сообщаются Chrome:

Answer 1

Я вижу, что вы используете jquery UI-класс "ui-draggable" в вашем contenteidtable div.Это может быть проблемой, так как перетаскиваемый элемент заставляет замолчать редактируемый контент, такой как текстовые области по умолчанию.Этого можно избежать, если вы сделаете ваш div перетаскиваемым из js и укажите опции:

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

Подробнее о перетаскиваемых опциях

Answer 2

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