Traté de crear mis propias notas para el proyecto escolar. Y me encontré con algunos problemas, estoy usando contentEditable para la parte de toma de notas y genera automáticamente divs. Intenté eliminarlos sin mucha suerte.
html
<div id="main" contenteditable="true"></div> <script type="text/javascript" src="static/js/note.js"></script>JavaScript
$('#main').on('DOMSubtreeModified', function(){ $('#main > div').children().unwrap(); });En este código, debe presionar espacio dos veces, pero el mayor problema es cuando intenta crear una nueva línea sobre el texto, todo el texto a continuación se elimina.
También intenté usar replace:
$("#main div").replaceWith("<br> ")Intenté usar muchas opciones diferentes, como reemplazar cuando se presionó enter ...
<body> <div id="main" contenteditable="true"></div> <script type="text/javascript"> $('#main').on('DOMSubtreeModified', function(){ $('#main > div').children().unwrap(); }); </script> </body> Su código funciona bien, las etiquetas <div> se están eliminando. Intenta usar una versión diferente de jQuery , yo uso
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>Con un poco de investigación, descubrí...
El uso de contenteditable en diferentes navegadores ha sido doloroso durante mucho tiempo debido a las diferencias en el marcado generado entre los navegadores . Por ejemplo, incluso algo tan simple como lo que sucede cuando presiona Entrar/Regresar para crear una nueva línea de texto dentro de un elemento editable se manejó de manera diferente en los principales navegadores (Firefox insertó elementos <br> , IE/Opera usó <p> , Chrome/Safari usó <div> ).
Afortunadamente, en los navegadores modernos las cosas son algo más consistentes. A partir de Firefox 60, Firefox se actualizará para envolver las líneas separadas en elementos <div> , igualando el comportamiento de Chrome, Opera moderno, Edge y Safari.
Si desea utilizar un separador de párrafos diferente, todos los navegadores anteriores admiten document.execCommand , que proporciona un comando defaultParagraphSeparator que le permite cambiarlo. Por ejemplo, para usar elementos <p> :
document.execCommand("defaultParagraphSeparator", false, "p"); Además, Firefox admite el argumento no estándar, br , para defaultParagraphSeparator desde Firefox 55. Esto es útil si su aplicación web espera el comportamiento anterior de Firefox y no quiere o no tiene tiempo para actualizarlo para usar el nuevo comportamiento. Puedes usar el antiguo comportamiento de Firefox con esta línea:
document.execCommand("defaultParagraphSeparator", false, "br");Puede ver los documentos web de MDN para obtener más información.