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

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

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

просто сохранить его в файл,
затем открыть его в IE
позволяют JScript, когда его спросили
нажать кнопку
проверьте, что вы получаете два окна сообщений
1. первый говорит: «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>

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

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

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

смотри также http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm и Risk of using contentEditable in IE

источник

2009-02-09 Ian Ringrose

Спасибо за помощь каждого, кто-то думает об использовании «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»

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

источник

2009-02-09 14:07:42

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

источник

2009-02-09 12:20:23

Спасибо, я только что изменил свой код, чтобы использовать MAINCONTENTS вместо MainContents, он не устраняет проблему. –

Первый вопрос, так как Gary указал на несостоятельность в случае, хотя это не повлияет на IE, поскольку explorer getElementById идет против спецификаций W3 и не чувствителен к регистру.

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

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

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

источник

2009-02-09 12:34:10 Steerpike

Спасибо, -> Изменение команды exec: document.execComman ("insertOrderedList", true, ""); Не работает для меня. Я редактировал свои вопросы, чтобы дать немного больше информации. Учитывая свободный выбор, я бы не использовал «contentEditable». –

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

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

источник

2009-02-09 13:14:45

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

ответ

Смежные вопросы