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

【问题标题】：Changing editable content from true to false using Javascript使用 Javascript 将可编辑内容从 true 更改为 false
【发布时间】：2021-02-05 21:25:24
【问题描述】：

所以我试图用 js 覆盖或使 contenteditable="true" 无效，因为据我所知 Notion Enhancer 没有添加 html 文件的选项。他们确实可以选择添加 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 是不可协商的，所以一切都必须通过 css 或 js。我想让 contenteditable 为 false 以更改标题周围的填充。

【问题讨论】：

Fiddle 对我来说很好用，我无法编辑 contenteditable 标签。
您链接到的小提琴已经有效。内容无法编辑。请再次检查。
@NineBerry 对不起，也许我只是愚蠢，但我有点困惑。有没有办法在不接触html的情况下将contenteditable=true更改为false？就像，留下 contenteditable=true 并通过 js 使其为假。否则我不知道如何覆盖 contenteditable。我正在尝试这样做，以便可以向 notranslate 类添加填充。
@Yuan-HaoChiang 我想我的问题并不清楚。本质上，我想用我自己的 css 覆盖 contenteditable 以更改填充，因为我无法更改概念中的 html。我可以添加 css/js 文件，所以这就是为什么我试图弄清楚如何使用 css 或 js 来做到这一点。或两者兼而有之。
您已经通过链接到的小提琴中的 javascript 将 contentEditable 更改为 false。

标签： javascript html css contenteditable client-side

【解决方案1】：

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

问题在于 html 代码中的 div 标记包含一个 style 属性，该属性已经指定了 padding 的值。这些在 html 代码中指定的值比在 css 中指定的优先级更高。

可能的解决方案 1：

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

可能的解决方案 2：

使用 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。

【讨论】：

【解决方案2】：

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

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

这里测试，至少在firefox中吃过，contentEditable在设置的时候必须有这个大小写E on Editable。

【讨论】：

但是之后我可以通过 css 或 js 设置占位符的样式吗？因为它仍然不适合我。我本质上是在尝试更改填充，但由于内容可编辑，我不能。所以如果我把它渲染为假，我想我可以用占位符做我自己的样式。
是的，你可以。例如：document.querySelector('div[placeholder="Heading 2"]').style.backgroundColor='yellow'; 将与更改 contentEditable 标志之前一样工作

【解决方案3】：

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

【讨论】：