是否可以禁用或控制“命令”?在contentitable元素中

Is it possible to disable or control "commands" in contentEditable elements?

本文关键字：contentitable 元素 命令 控制 是否      更新时间：2023-09-26

据我所知，具有contentEditable="true"的元素是某种所见即所得的HTML编辑器。它生成与发出的命令相对应的相关HTML标记。

例如，如果选择文本，然后按Ctrl+B，则选中的文本将放在<b></b>标记之间。

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

我可以做的其他事情:

  • 事后过滤掉标签;但是用户会认为他们把东西加粗了，而实际上他们没有。
  • 重新设计标签样式，使它们不显示，然后过滤掉;但是有可能我忘记了，或者样式表被禁用了
  • 完全不使用contentEditable，而是使用textarea。但除此之外，contentEditable可以很容易地突出显示正在编辑的段落。这对textarea来说要困难得多。

我没有试图通过JavaScript抑制不需要的标签，而是将它们样式化，并将未样式化的文本保存/恢复到可内容区域。

更新:添加粘贴图像抑制。

[contenteditable] {
  background: #eee;
  width: 15rem;
  height: 4rem;
  padding: 1em;
}
[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}
[contenteditable] img {
  display: none;
}
<div contenteditable></div>

我知道现在太晚了，但如果能帮助到别人，值得一试。

以下是我在javascript中如何处理它，禁用ctrl+命令(ctrl+B，ctrl+任意键)，我使用过: HTML: 

<div id="xyz" onKeyDown="return disable(this,event);" contentEditable="true">
This is my Rich Text Editor
</div>
JavaScript: 

function disable(x,e){
    if(e.ctrlKey){ // .ctrlKey tells that ctrl key was pressed.
    return false;
    }
return true;
}

演示

但是这也会影响使用ctrl+C和ctrl+V进行复制+粘贴的默认方式。如果您想保持所有默认功能，除了特殊情况，如:ctrl+B(粗体)， ctrl+i(斜体)和ctrl+u(下划线)，那么最好在keyCode值上使用switch case statements，如:

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.

演示

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

编辑

作为Betty_St建议，要使此工作在Mac上你需要替换:

if(e.ctrlKey){


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

Then That可能适用于Mac OS。

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

希望能有所帮助:)。欢呼。

contentitable最好的登陆页资源可能在这里:

http://blog.whatwg.org/the-road-to-html-5-contenteditable

基本上，它归结为:你不能重新配置密钥代码本身——它们总是存在的，并且它们根据浏览器的本地化而不同。

但是，您可以使用JavaScript拦截键盘命令，示例如下:

http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

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

在React中，我们使用next代码来禁用除了复制/粘贴和移动命令之外的所有命令:

const onKeyDown = (e) =>
  e.ctrlKey || e.metaKey
  && ![`c`, `v`, `ArrowLeft`, `ArrowRight`].includes(e.key)
  && e.preventDefault()
const App = props => (
  <div
    contentEditable
    suppressContentEditableWarning
    
    onKeyDown={onKeyDown}    
  >
    12345
  </div>
)
ReactDOM.render(
  <App />,
  document.getElementById('react')
)
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

相关文章：