如何重新创建 google 记下

Question

我尝试为学校项目创建自己的笔记。我运行遇到了一些问题，我在做笔记的部分使用了 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();
    });

在此代码中，您必须按 space 两次，但更大的问题是当您尝试在文本上方创建一个新行时，下面的所有文本都会被删除。

还尝试使用替换：

$("#main div").replaceWith("<br> ")

我尝试使用许多不同的选项，例如在按下回车键时替换...

Answer 1

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

Answer 2

通过一些研究，我发现...

在 不同的浏览器 中使用 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 55 起，Firefox 支持 non-standard 参数 br，用于 defaultParagraphSeparator。如果您的 Web 应用程序需要旧的 Firefox 行为，而您不需要，这将很有用不想或没有时间更新它以使用新行为。您可以通过此行使用旧的 Firefox 行为：

document.execCommand("defaultParagraphSeparator", false, "br");

您可以查看MDN web docs了解更多信息。

如何重新创建 google 记下

How to recreate google keep note

javascript

html

jquery

flask

contenteditable