web-dev-qa-db-ja.com

contentEditable要素の「コマンド」を無効化または制御することは可能ですか？

私が理解しているように、contentEditable="true"を持つ要素は、ある種のWYSIWYGHTMLエディターです。発行されたコマンドに対応する関連するHTMLタグを生成します。

たとえば、テキストを選択してからを押すと Ctrl+B、選択したテキストは<b></b>タグの間に配置されます。

結果のテキストにスタイルタグを含める必要はありません。これらのコマンドの動作をどのように抑制、ハイジャック、または制御しますか？

私ができる他のこと：

  • 事後にタグを除外します。しかし、ユーザーは、実際には太字になっていないのに、太字になっていると思います。
  • タグが表示されないようにスタイルを変更してから、フィルターで除外します。しかし、私がそれを忘れるか、何らかの理由でスタイルシートが無効になっている可能性があります
  • contentEditableはまったく使用せず、代わりにtextareaを使用してください。しかし、とりわけ、contentEditableを使用すると、編集中の段落を簡単に強調表示できます。これは、textareaで行うのがはるかに困難です。
javascripthtmlcontenteditable
21
Bambax

おそらく、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 を見てみてください。

10
stslavik

JavaScriptを使用して不要なタグを抑制しようとするのではなく、スタイルを設定して、スタイルが設定されていないテキストをコンテンツ編集可能領域に保存/復元します。

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

[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}
<div contenteditable></div>
15
Andy Hoffman

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>
0
lokhmakov