Как воссоздать Google Keep Note
Я пытался создать свои собственные заметки для школьного проекта. И я столкнулся с некоторыми проблемами, я использую contentEditable для создания заметок, и он автоматически генерирует div. Я попытался удалить их без особого успеха.
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();
});
В этом коде вам нужно дважды нажать пробел, но большая проблема заключается в том, что когда вы пытаетесь создать новую строку над текстом, весь текст ниже удаляется.
также пробовал использовать замену:
$("#main div").replaceWith("<br> ")
Я пробовал использовать множество различных опций, таких как замена при нажатии клавиши ввода...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
<body>
<div id = "main" contenteditable = "true"></div>
<script type = "text/javascript">
$('#main').on('DOMSubtreeModified', function(){
$('#main > div').children().unwrap();
});
</script>
</body>
Ваш код работает нормально, теги <div> удаляются. Попробуйте использовать другую версию jQuery, я использую
<script src = "https://code.jquery.com/jquery-3.6.0.js" integrity = "sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk = " crossorigin = "anonymous"></script>
Проведя небольшое исследование, я узнал...
Использование contenteditable в разные браузеры долгое время было болезненным из-за различий в сгенерированная разметка между браузерами. Например, даже такая простая вещь, как то, что происходит, когда вы нажимаете Enter/Return для создания новой строки текста внутри редактируемого элемента, обрабатывалась по-разному в основных браузерах (Firefox вставлял <br> элементы, IE/Opera использовал <p>, Chrome/Safari использовал <div>).
К счастью, в современных браузерах все несколько более последовательно. Начиная с Firefox 60, Firefox будет обновлен для переноса отдельных строк в элементы <div>, что соответствует поведению Chrome, современной Opera, Edge и Safari.
Если вы хотите использовать другой разделитель абзацев, все вышеперечисленные браузеры поддерживают document.execCommand, который предоставляет команду defaultParagraphSeparator, позволяющую изменить его. Например, чтобы использовать элементы <p>:
document.execCommand("defaultParagraphSeparator", false, "p");
Кроме того, Firefox поддерживает нестандартный аргумент br для defaultParagraphSeparator, начиная с Firefox 55. Это полезно, если ваше веб-приложение ожидает старое поведение Firefox, и вы не хотите или у вас нет времени обновлять его для использования новое поведение. Вы можете использовать старое поведение Firefox с этой строкой:
document.execCommand("defaultParagraphSeparator", false, "br");
Вы можете увидеть Веб-документы MDN для получения дополнительной информации.
Спасибо за совет, наконец-то все работает ?
Спасибо, но это не работает. Там все та же проблема, что и раньше, он удаляет все, если я нажму ввод над текстом.