Javascript 是否有可能禁用或控制“；“命令”；在可编辑元素中？

据我所知，带有

contentEditable=“true”

的元素是一种所见即所得的HTML编辑器。它生成与发出的命令相对应的相关HTML标记

例如，如果选择文本，然后按Ctrl+B，则所选文本将放置在

标记之间

我需要在生成的文本中没有样式标记。如何压制、劫持或控制这些命令的行为

我可以做的其他事情：

• 过滤掉事后的标签；但是用户会认为他们已经用粗体字写了东西，而实际上他们没有
• 重新设置标签的样式，使其不显示，然后将其过滤掉；但是我可能会忘记一个，或者样式表被禁用了
• 不要使用

  contentEditable

  ，而是使用

  textarea

  。但是，除其他外，

  contentEditable

  使突出显示正在编辑的段落变得非常容易。使用

  textarea

  更难做到这一点

---

contentEditable的最佳登录页资源可能是：

基本上，它归结为：您不能重新配置关键代码本身——它们总是存在的，并且根据浏览器的本地化程度不同而有所不同

但是，您可以使用JavaScript截取键盘命令，如下所示：

---

我最近一直在玩弄contentEditable，成绩好坏参半。有些东西往往比其他东西工作得更好，而且在整个浏览器中的结果好坏参半。如果您真正想要的只是一个用于contentEditable块元素的编辑器，请尝试查看。

我知道这为时已晚，但如果它可以帮助某些人，那么应该尝试一下

下面是我在

javascript

中如何处理它的，为了禁用ctrl+命令（ctrl+B，ctrl+Any键），我使用了：

HTML:

---

但这也会影响使用ctrl+C和ctrl+V进行复制+粘贴的默认方式。如果您希望保留所有默认功能，但以下特殊情况除外：ctrl+B（Bold）、ctrl+i（斜体）和ctrl+u（下划线），则最好在

keyCode

上使用

切换大小写语句

，例如：

function disable(x,e){
   var ret=true;
    if(e.ctrlKey){
        switch(e.keyCode){
            case 66: //ctrl+B or ctrl+b
            case 98: ret=false;
                     break;
            case 73: //ctrl+I or ctrl+i
            case 105: ret=false;
                      break;
            case 85: //ctrl+U or ctrl+u
            case 117: ret=false;
                      break;
        }
    }
    return ret;
} // This will work fine for ctrl+c and ctrl+v.

---

现在，这对于复制+粘贴的默认功能很好，但会限制其他功能，如粗体、斜体和下划线

---

编辑

同样，要在Mac上运行此功能，您需要更换：

if(e.ctrlKey){

与

那么，这可能在Mac OS上起作用

注意：我以前没有和Mac打过交道，所以我不知道这样做是否正确。

---

---

希望有帮助：）。干杯。

我没有试图通过JavaScript抑制不需要的标记，而是将它们设置为样式，并将未设置样式的文本保存/恢复到contenteditable区域

更新：添加了粘贴图像抑制

[内容可编辑]{
背景：#eee；
宽度：15雷姆；
身高：4rem；
填充：1em；
}
[content]b{
字体大小：正常；
}
[内容编辑]我{
字体风格：普通；
}
[内容可编辑]img{
显示：无；
}

---

在React中，我们使用下一个代码禁用除复制/粘贴和移动命令以外的所有命令：

const onKeyDown=（e）=>
e、 ctrlKey | | e.元键
&& ![`c`、`v`、`ArrowLeft`、`ArrowRight`].包括（e.key）
&&e.预防违约（）
const App=props=>(
12345
)
ReactDOM.render(
,
document.getElementById（'react'）
)

感谢您的快速回答；当一个命令运行时，我能得到通知吗？或者我必须听击键吗？它是一个事件监听器——据我所知，除了监听器之外，没有任何通知。html5规范在7.5.1结尾说：“上面定义的所有动作，无论是由用户触发还是通过编程方式触发（例如，通过execCommand（）命令）“上面的所有操作”指的是所有编辑操作：插入、删除、充实等。但是浏览器似乎很少支持“变异事件”，如果有的话。对不起，你说得绝对正确。这方面已经有了一个整合的系统。看这里：好主意！我可以用它来模拟一个文本区域，它允许更丰富的演示，但仍然限制了可以显示/编辑的内容。@frumbert，很高兴它对您有所帮助。在mac上，我不得不使用

e.metaKey

，因为您将使用CMD+B使文本加粗！所以我做了

e.ctrlKey | | e.metaKey

@BettySt谢谢你的评论。我现在已经编辑了我的答案。只需设置

contentEditable=“false”

。看看答案。哇，喜欢你的主意！这很好，我只是使用了它，但是应该注意，这只适用于文本，其他行为（如图像）仍然可以从外部源复制并粘贴到此区域。@JohnDavid我现在已经解决了粘贴图像的抑制问题。

function disable(x,e){
   var ret=true;
    if(e.ctrlKey){
        switch(e.keyCode){
            case 66: //ctrl+B or ctrl+b
            case 98: ret=false;
                     break;
            case 73: //ctrl+I or ctrl+i
            case 105: ret=false;
                      break;
            case 85: //ctrl+U or ctrl+u
            case 117: ret=false;
                      break;
        }
    }
    return ret;
} // This will work fine for ctrl+c and ctrl+v.

if(e.ctrlKey){

if(e.ctrlKey || e.metaKey){ // Coz You'll be using CMD key on mac