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

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

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

  1. просто сохраните его в файл,
  2. затем откройте его в IE
  3. включить jscript, когда его спросят
  4. нажать на кнопку
  5. check you get two message boxes
    1. first one says “MainContents = object”
    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


javascript html internet-explorer internet-explorer-6
person Ian Ringrose    schedule 09.02.2009    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

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

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

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

person Steerpike    schedule 09.02.2009
comment
Спасибо, - ›Изменение команды exec на: document.execComman (insertOrderedList, true,); У меня не работает. Я отредактировал свои вопросы, чтобы дать немного больше информации. Если бы у меня был свободный выбор, я бы не стал использовать contentEditable. - person Ian Ringrose; 09.02.2009

arrow_upward
1
arrow_downward

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

<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.

person Gary Green    schedule 09.02.2009

arrow_upward
1
arrow_downward

Спасибо за помощь, любой, кто думает об использовании 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. Как мне совместить первую строку моего кода с остальными?

person Ian Ringrose    schedule 09.02.2009

arrow_upward
0
arrow_downward

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

person Gary Green    schedule 09.02.2009
comment
Спасибо, я только что изменил свой код, чтобы использовать MAINCONTENTS вместо MainContents, это не решает проблему. - person Ian Ringrose; 09.02.2009