contentEditable 仅在关闭并重新打开浏览器后工作

Question

我在此处关注 contentEditable 演示：https://codepen.io/Shokeen/pen/eJRRVw。我的代码对于 CSS 和 JS 完全相同，但我对下面的 HTML 做了一些细微的改动：

<div id="wrapper">
<section>
<h1 class="headline">contentEditable Demonstration</h1>

<button id="editBtn" type="button">Edit Document</button>
<div id="editDocument">    
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited by <span id="author">Monty Shokeen</span></p>      
  <div id="content">{{temp_df | safe}}</div>
</div>

基本上，我将段落 id="content" 行替换为 div id="content" 行，其中 temp_df 是 Pandas 数据 frame.to_html使用 Flask 框架从 Python 导入。理想情况下，会显示一个 table，即 editable，就像上面代码笔中的所有其他 editable 项一样。但是，当我运行这个时， table 根本没有出现。经过一些测试，我发现有趣的是，如果我运行程序，在浏览器中打开它（不显示 table ），然后关闭浏览器，然后重新打开浏览器， table 出现了。我已经在多个浏览器中尝试过这个问题，所以这可能不是任何浏览器独有的问题。在整个过程中，我还在我的终端中包含了消息。

1 - 当我运行 Flask 程序

2 - 当我在我的网站上单击一个按钮以显示 table（table 不显示）

3 - 当我关闭浏览器并在新浏览器中重新打开程序时（table 现在显示）

Answer 1

The CodePen demo, modified as described，似乎有效。这是我所做的：

将 HTML 替换为您问题中的 HTML。
将{{temp_df | safe}}替换为简单的HTML table.

所以似乎没有足够的信息来完全回答你的问题。您的问题中未描述的内容可能会导致意外行为。

一些想法：

您网站上的按钮显然与 CodePen 演示中的按钮行为不同。你的按钮有什么作用？
HTML temp_df 结果是什么？
浏览器开发控制台中有 JavaScript errors/warnings 吗？
CodePen 演示的任何部分是否被不当复制？（复制粘贴错误。）

这是我最好的猜测： 检查与 localStorage 相关的代码。这是代码的一部分，我们已经看到在运行之间运行不同的可能性最高。

最初的 CodePen 演示使用 localStorage 作为临时“数据库”在浏览器中存储信息。但是，我假设您的网站想要从不是 localStorage.

的真实数据库读取和写入数据

只需删除与 localStorage 相关的所有代码即可解决您的问题。

contentEditable 仅在关闭并重新打开浏览器后工作

contentEditable working only after close and reopen browser

javascript

html

css

flask

contenteditable