Почему ContentEditable удаляет "ID" из div

У меня проблемы с работой редактора HTML. Для его реализации мы используем "contentEditable", однако, когда любой параметр форматирования абзаца выполняется без выбранного содержимого, IE удаляет идентификатор из одного из элементов div на странице.

Проблема повторяется для меня с HTML,

  1. просто сохраните его в файл,
  2. затем откройте его в IE
  3. включить jscript, когда спросят
  4. нажать кнопку
  5. проверьте, что вы получаете два окна сообщения
    1. первый говорит "MainContents = объект"
    2. второй говорит "MainContents = NULL"

Я использую IE 6.0.2900.5512 с XP SP3

Так повторяется ли это для вас?

Что здесь происходит?

<html>
<head>

</head>

<body id="BODY">
<div contentEditable="true" id="EDITBOX"> 
</div>

<div id="MAINCONTENTS" unselectable="on">
<button title="Ordered List" unselectable="on"
    onclick='alert("MainContents = " + document.getElementById("MAINCONTENTS")); 
    document.execCommand("InsertOrderedList");
    alert("MainContents = " + document.getElementById("MAINCONTENTS"));
                     '>
    Push Me
</button>
</div>

</body>
</html>

<script type="text/javascript">
    document.getElementById("EDITBOX").focus();
</script>

Предыстория Я работаю на независимого поставщика ПО, который продает программное обеспечение корпорациям, в настоящее время все наши клиенты используют IE, и нет никакой зависимости от рынка для поддержки других браузеров. Мне сказали, чтобы реализовать редактор HTML, используя contentEditable. Все параметры форматирования основаны на document.execCommand(), например document.execCommand ("полужирный");

Из-за лицензионных ограничений (LGPL не нравится) и / или стоимости очень трудно получить разрешение на использование стороннего редактора HTML. Нам потребовалось время регистрации, чтобы получить возможность использовать jquery.

У меня есть редактор, работающий отдельно от случая команд форматирования абзаца, когда у пользователя нет выбранных элементов. HTML-код, который я разместил, представляет собой небольшой фрагмент HTML-кода, который я написал, чтобы воспроизвести проблему, с которой я столкнулся.

см. также http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm и риск использования contentEditable в IE

Источник

4 ответа

Решение

Спасибо всем за помощь, любой, кто думает об использовании "contentEditable", должен прочитать другие ответы на мой вопрос, а затем очень тщательно подумать, прежде чем использовать "contentEditable".

Я обнаружил, что если я использую iframe, например,

<iframe id=EditorIFrame >
</iframe>

И создайте div, который можно редактировать в iframe, например

theEditorIFrame = document.getElementById('EditorIFrame');  
theEditorDoc = theEditorIFrame.contentWindow.document;  
theEditorDoc.body.innerHTML = '<body><div contentEditable="true" id="EDITBOX"></div></body>';
theEditorDiv = theEditorDoc.getElementById("EDITBOX") 
theEditorDiv.focus();

theEditorDoc.execCommand("InsertOrderedList")

Кажется, все работает для меня, пока я не получу следующий неприятный сюрприз от "contentEditable" и "execCommand"

Ps, как я могу получить первую строку моего кода в очередь с остальными?

Источник

Первая проблема, как указал Гэри, заключается в несоответствии в случае, хотя это не повлияет на IE, так как проводник getElementById идет вразрез со спецификациями W3 и не учитывает регистр.

Изменение команды exec на:document.execCommand("insertOrderedList",true,""); кажется, что объекты будут для обоих предупреждений, а также делает код немного лучше в Firefox (который вообще не работал).

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

Я добавляю правку в этот ответ, потому что чем больше я играю с вашим тестовым кодом, тем более противоречивыми становятся мои результаты. Я получаю разные результаты при первом запуске в разных браузерах, и я получаю разные результаты после его запуска несколько раз и перезапуска браузера. Честно говоря, это именно то, чего вы отчаянно хотите избежать при разработке javascript, поэтому я повторю свой первоначальный вопрос. Вам действительно нужно использовать эту технику для достижения ваших целей. Есть лучшие и более простые способы сделать вставку в DOM.

Источник

Попробуй это;

<html>
<head>
<title></title>
<script type="text/javascript">
function addToList(text) {
        var list = document.getElementById('list');
        list.innerHTML += '<li>'+text+'</li>';
}
</script>
</head>
<body>

<div contentEditable="true" id="editBox" style="width: 300px; height: 100px; border:1px solid #ff0000;"> </div>
<ol id="list"></ol>

<button title="Ordered List" unselectable="on" onclick="addToList(document.getElementById('editBox').innerHTML)">Push me</button>


</body>
</html>

Вышесказанное должно дать надежные результаты в большинстве браузеров. Я проверял выше в FF3 и IE6.

Источник

Идентификаторы чувствительны к регистру. Попробуйте MAINCONTENTS вместо MainContents.

Источник
Другие вопросы по тегам