是否可以在contentEditable元素中禁用或控制"命令"？

Question

据我所知,一个元素contentEditable="true"是某种WYSIWYG HTML编辑器.它会生成与发出的命令相对应的相关HTML标记.

例如,如果选择文本然后按Ctrl+ B,则所选文本将放置在<b></b>标记之间.

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

我可以做的其他事情:

• 事后过滤掉标签; 但是当用户真的没有时,他们会认为他们把事情做了大胆的事情
• 重新设置标签的样式,使它们不显示,然后将其过滤掉; 但是我有可能忘记一个,或者某种方式样式表被禁用
• 完全不使用contentEditable而是使用textarea.但除此之外,还contentEditable可以很容易地突出显示正在编辑的段落.这对于一个人来说要困难得多textarea.

Answer 1

我知道为时已晚,但是如果它可以帮助一些它应该值得一试.

以下是我处理它的方法javascript,禁用ctrl+ Command(ctrl+ B,ctrl+ Any Key),我用过:

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;
}

DEMO

但这也会影响使用ctrl+ C和ctrl+ 进行复制+粘贴的默认方式 V.如果要保留除特殊情况之外的所有默认功能,例如:ctrl+ B(粗体),ctrl+ i(斜体)和ctrl+ u(下划线),那么最好使用switch case statements以下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.

DEMO

现在,这将适用于执行复制+粘贴的默认功能,但会限制其他像粗体,斜体和下划线.

编辑

至于建议,要在Mac上这个工作你需要更换:Betty_St

if(e.ctrlKey){

同

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

然后那可能适用于Mac OS.

注意:我以前没有处理过Mac,所以我不知道这是否是正确的做法.

希望能帮助到你 :).干杯.

Answer 2

我不是试图通过JavaScript来抑制不需要的标签,而是将它们设置为样式并保存/恢复特定区域中的未样式文本:

[contenteditable] {
  background: #eee;
  width: 15rem;
  height: 4rem;
  padding: 1em;
}

[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}

<div contenteditable></div>

Answer 3

contentEditable的最佳登陆页面资源可能是:

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

基本上,它归结为:您无法重新配置密钥代码本身 - 它们始终存在,并且它们根据浏览器的本地化而不同.

但是,您可以使用JavaScript拦截键盘命令,其中的一个示例可以在这里看到:

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

我最近一直在玩contentEditable并取得了不同程度的成功.有些事情往往比其他事情更好,并且在浏览器中产生了混合的结果.如果您真正想要的是contentEditable块元素的编辑器,请尝试查看aloha编辑器.

Answer 4

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

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>