Почему ContentEditable удаляет «ID» из div - PullRequest
Новая
       16

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

1 голос
/ 09 февраля 2009

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

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

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

Фон Я работаю на независимого поставщика, который продает программное обеспечение корпорациям, в настоящее время все наши клиенты используют 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 ]

2 голосов
/ 09 февраля 2009

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

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

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

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

1 голос
/ 09 февраля 2009

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

1 голос
/ 09 февраля 2009

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

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

0 голосов
/ 09 февраля 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...