javascript 是否可以禁用或控制 contentEditable 元素中的“命令”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7207291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to disable or control "commands" in contentEditable elements?
提问by Bambax
As I understand it, an element with contentEditable="true"is some kind of WYSIWYG HTML editor. It generates relevant HTML tags corresponding to the command issued.
据我了解，一个元素contentEditable="true"是某种 WYSIWYG HTML 编辑器。它生成与发出的命令相对应的相关 HTML 标签。
For example, if one selects text and then presses Ctrl+B, the selected text is placed between <b></b>tags.
例如，如果选择文本然后按Ctrl+ B，则所选文本将放置在<b></b>标签之间。
I need to have no style tags in the resulting text. How does one suppress, hiHyman or control the behavior of those commands?
我需要在结果文本中没有样式标签。如何抑制、劫持或控制这些命令的行为？
Other things I could do:
我可以做的其他事情：
- Filter out the tags after the fact; but then the user will think they have put things in bold when they really haven't
- Re-style the tags so that they don't show, and then filter them out; but there's a chance I might forget one, or that somehow the stylesheet is disabled
- Not use
contentEditableat all but atextareainstead. But among other things,contentEditablemakes it really easy to highlight the paragraph that is being edited. That's much more difficult to do with atextarea.
- 事后过滤掉标签；但是用户会认为他们已经把东西加粗了，而实际上他们并没有
- 重新设置标签的样式，使其不显示，然后将它们过滤掉；但我可能会忘记一个，或者样式表以某种方式被禁用
- 根本不用
contentEditable，而是用 atextarea代替。但除此之外，还contentEditable可以轻松突出显示正在编辑的段落。使用textarea.
采纳答案by stslavik
Probably the best landing page resource for contentEditable is here:
contentEditable 的最佳登陆页面资源可能在这里：
http://blog.whatwg.org/the-road-to-html-5-contenteditable
http://blog.whatwg.org/the-road-to-html-5-contenteditable
Basically, what it boils down to is this: You can not reconfigure the key codes themselves – they always exist, and they're different depending on localizations of browsers.
基本上，它归结为：您无法重新配置密钥代码本身——它们始终存在，并且它们因浏览器的本地化而不同。
However, you can intercept the keyboard commands using JavaScript, an example of which can be seen here:
但是，您可以使用 JavaScript 拦截键盘命令，示例如下：
http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js
http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js
I've been playing around with contentEditable lately with mixed success. Some things just tend to work better than others, and have mixed results across browser. If all you really want is an editor for contentEditable block elements, try taking a look at aloha editor.
我最近一直在玩 contentEditable 并取得了不同的成功。有些事情往往比其他事情做得更好，并且在浏览器中的结果好坏参半。如果您真正想要的只是 contentEditable 块元素的编辑器，请尝试查看aloha editor。
回答by Vedant Terkar
I know it is too late, but if it can help some one It should worth give a try.
我知道为时已晚，但如果它可以帮助某人，那么值得一试。
Here is how I handled it in javascript, to disable the ctrl+Command(ctrl+B,ctrl+Any Key), I've used:
这是我如何处理它javascript，以禁用ctrl+ Command( ctrl+ B, ctrl+ Any Key)，我使用过：
HTML:
HTML：
<div id="xyz" onKeyDown="return disable(this,event);" contentEditable="true">
This is my Rich Text Editor
</div>
JavaScript:
JavaScript：
function disable(x,e){
if(e.ctrlKey){ // .ctrlKey tells that ctrl key was pressed.
return false;
}
return true;
}
但这也会影响使用ctrlctrl+CC和ctrlctrl+进行复制+粘贴的默认方式 VV。如果您想保留所有默认功能，但特殊情况除外：ctrlctrl+ BB(Bold粗体), ctrlctrl+ ii(italics斜体）和ctrlctrl+ uu（下划线），那么最好是使用
switch case statementsswitch case statements上keyCodekeyCode样值：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.
现在，这对于执行复制+粘贴的默认功能可以正常工作，但会限制其他功能，如粗体、斜体和下划线。
EDIT编辑
As Betty_StSuggested, To make this work on Mac You need to replace:
按照建议，要在 Mac 上运行此功能，您需要更换：Betty_St
if(e.ctrlKey){
with
和
if(e.ctrlKey || e.metaKey){ // Coz You'll be using CMD key on mac
Then That Might work on Mac OS.
那么这可能适用于 Mac OS。
Note: I've not dealt with Mac previously, So I don't know whether that is right way of doing or not.
注意：我以前没有处理过 Mac，所以我不知道这样做是否正确。
希望能帮助到你 ：）。干杯。
回答by Andy Hoffman
Rather than trying to suppress the unwanted tags via JavaScript, I just style them away and save/restore the un-styled text in the contenteditable region:
我没有尝试通过 JavaScript 抑制不需要的标签，而是将它们设置为样式并在 contenteditable 区域中保存/恢复未设置样式的文本：
[contenteditable] {
background: #eee;
width: 15rem;
height: 4rem;
padding: 1em;
}
[contenteditable] b {
font-weight: normal;
}
[contenteditable] i {
font-style: normal;
}<div contenteditable></div>回答by lokhmakov
In React we use next code to disable all except Copy / Paste and move commands:
在 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>