使用 Javascript 将可编辑内容从 true 更改为 false

Question

所以我试图用 js 覆盖或取消 contenteditable="true" 因为据我所知，Notion Enhancer 没有添加 [=24= 的选项] 文件。他们确实可以选择添加 css 和客户端 javascript，所以我正在尝试使用 js 将 contenteditable 变为 false。我尝试了很多选择，但似乎没有任何效果。有没有人知道如何在不触及 HTML 的情况下通过 js 将其变为 false？

This is the html markup.

  <div style="display: flex; width: 100%; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, &quot;Apple Color Emoji&quot;, Arial, sans-serif, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-weight: 600; font-size: 1.5em; line-height: 1.3; color: inherit; fill: inherit;">
    <div contenteditable="true" spellcheck="true" placeholder="Heading 2" data-root="true" class="notranslate" style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding: 3px 2px;">Monday</div>
  </div>
</div>

正如我所说，HTML是non-negotiable，所以一切都必须通过css或js。我想让 contenteditable 为 false 以更改标题周围的填充。

Answer 1

如果您只想引用这个特定的 div 也许我们应该使用占位符来定位它：

document.querySelector('div[placeholder="Heading 2"]').contentEditable=false;

测试到这里，火狐中吃的最少，contentEditable在设置的时候一定要在Editable上有大写E的这种情况。

Answer 2

所以，这里的问题与contentEditable属性无关。

问题是 html 代码中的 div 标签包含一个 style 属性，该属性已经指定了 padding 的值。 html 代码中指定的这些值比 css.

中指定的值具有更高的优先级

可能的方案一：

使用 css 中的 !important 标记让 css 中的定义覆盖该规则代码中的填充设置：

.notion-sub_header-block .notranslate {
  background-color: #fed2e4;
  width: auto;
  position: relative;
  padding:30px !important;
}

Fiddle for Solution 1

参阅 Documentation on Specifity 了解 !important

可能的解法二：

使用 JavaScript 从 html 标签的 style 属性中删除 padding。

var editableElements = document.querySelectorAll("[class=notranslate");
    
for (var i = 0; i < editableElements.length; ++i) {
  editableElements[i].style.padding = "";
}

Fiddle for Solution 2

解决方案 1 在这种情况下更优雅，因为不需要 JavaScript。

Answer 3

document.getElementById("table").contentEditable = "true";

使用 Javascript 将可编辑内容从 true 更改为 false

Changing editable content from true to false using Javascript

html

javascript

css

client-side

contenteditable