Как воссоздать 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 позволяет создавать асинхронные запросы к серверу с помощью технологии AJAX.


37
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 для получения дополнительной информации.