remove - string to html javascript
¿Por qué ContentEditable elimina "ID" de div? (4)
Los ID son sensibles a mayúsculas y minúsculas Pruebe MAINCONTENTS en lugar de MainContents.
Tengo problemas para que funcione un editor HTML. Estamos utilizando "contentEditable" para implementarlo, sin embargo, cuando se realiza una opción de formato de párrafo sin contenido seleccionado, IE elimina la ID de uno de los divs en la página.
El problema se repite para mí con el HTML,
- solo guárdalo en un archivo,
- luego ábrelo en IE
- habilitar jscript cuando se le pregunte
- presione el botón
- comprueba que obtienes dos cuadros de mensaje
- el primero dice "MainContents = object"
- el segundo dice "MainContents = NULL"
Estoy usando IE 6.0.2900.5512 con XP SP3
Entonces, ¿esto repite para ti?
Que esta pasando?
<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>
Antecedentes Trabajo para un ISV que vende software a corporaciones, en la actualidad todos nuestros clientes usan IE y no hay mercado que dependa de otros navegadores. Me han dicho que implemente un editor HTML usando contentEditable. Todas las opciones de formato se basan en document.execCommand (), por ejemplo, document.execCommand ("bold");
Debido a restricciones de licencia (LGPL no le gusta) y / o costo, es muy difícil obtener la aprobación para usar un editor de HTML de terceros. Nos llevó un tiempo de registro solo para poder usar jquery.
Tengo el editor trabajando aparte del caso de los comandos de formato de párrafo cuando el usuario no tiene ningún elemento seleccionado. El HTML que publiqué es un pequeño fragmento de HTML que escribí para reproducir el problema que estoy teniendo.
ver también http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm y Riesgo de usar contenido Editable en IE
Prueba esto;
<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>
Lo anterior debería dar resultados confiables en la mayoría de los navegadores. He probado lo anterior en FF3 e IE6.
Gracias por la ayuda de todos, cualquiera que piense en usar "contentEditable" debería leer las otras respuestas a mi pregunta y luego pensar mucho antes de usar "contentEditable".
He encontrado que si uso un iframe por ejemplo
<iframe id=EditorIFrame >
</iframe>
Y crea el div que se puede editar en el iframe, por ejemplo
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")
Todo parece funcionar para mí, en este momento hasta que me llegue la próxima desagradable sorpresa de "contentEditable" y "execCommand"
Ps ¿Cómo obtengo la primera línea de mi código para alinearme con el resto?
El primer problema, como señaló Gary , es la incoherencia en el caso, aunque no afectará a IE, ya que el explorador getElementById va en contra de las especificaciones de W3 y no distingue entre mayúsculas y minúsculas.
Cambiar el comando exec para que sea: document.execCommand("insertOrderedList",true,""); parece ser objeto para ambas alertas y también hace que el código funcione un poco mejor en Firefox (que no funcionaba en absoluto).
Creo que mi primera pregunta sería, ¿realmente necesitas hacer esto usando execCommand? Sé que probablemente estés tratando de hacer algo más que solo insertar una lista ordenada, pero me atrevería a adivinar que implementar lo que tratas de hacer con el DOM sería una forma más limpia de hacerlo.
Estoy agregando una edición a esta respuesta, porque cuanto más juego con tu código de prueba, más inconsistentes se vuelven mis resultados. Obtengo resultados diferentes la primera vez que lo ejecuto en diferentes navegadores y obtengo resultados diferentes después de ejecutarlo varias veces y luego reiniciar el navegador. Para ser honesto, este es exactamente el tipo de cosas que deseas evitar desesperadamente al hacer el desarrollo de JavaScript, así que voy a reiterar mi pregunta inicial. ¿De verdad necesitas usar esta técnica para lograr tus objetivos? Hay formas mejores y más fáciles de insertar en el DOM.