Question

据我了解，contentEditable="true"的元素是某种WYSIWYG HTML编辑器。它会生成与发出的命令相对应的相关HTML标记。

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

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

我可以做的其他事情：

事后过滤掉标签;但是当用户真的没有
重新设置标签的样式，使其不显示，然后将其过滤掉;但我有可能忘记一个，或者某种方式是样式表被禁用
根本不使用contentEditable，而是使用textarea。但除此之外，contentEditable使得突出显示正在编辑的段落变得非常容易。使用textarea。

Answer 1

我知道为时已晚，但是如果它可以帮到某个人则应该尝试一下。

以下是我在javascript中处理它的方法，以禁用 ctrl + 命令（ 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 （下划线），然后最好使用{{ 1}}在switch case statements上的值如：

keyCode

DEMO

<小时/> 现在，这将适用于执行复制+粘贴的默认功能，但会限制其他内容，如粗体，斜体和下划线。

<小时/> 的修改

作为Betty_St Suggested，要在Mac上运行，您需要替换：

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){

然后那可能适用于Mac OS。

注意：我之前没有处理过Mac，所以我不知道这是不是正确的做法。

<小时/> 希望能帮助到你：）。欢呼声。

Answer 2

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

plot(as.matrix(d1[2,]), as.matrix(d2[2,]), type="o", col="red", 
     ann=FALSE, pch=17, log = 'y',lty=4, axes=FALSE, las=2,
     panel.first=abline(v=x_axis_labels, h=y_axis_labels, lty=2, col='lightgray'))

[contenteditable] {
  background: #eee;
  width: 15rem;
  height: 4rem;
  padding: 1em;
}

[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}

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 editor。

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>

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

4 个答案: