contentEditable div のサイズ変更ハンドラーを削除する

StackOverflow https://stackoverflow.com/questions/1926525

質問

リッチ テキストエリアとして使用する contentEditable div を作成しました。周りにサイズ変更ハンドラーがあるので、削除したいと思います。どうすればいいでしょうか？

編集：これは、div を絶対的に配置しているために発生しているようです。そのため、Firefox は、オフにすることができない腹立たしい _moz_resize 属性を要素に追加します。

alt text

役に立ちましたか？

解決 2

これは、私は、ラッパーのdivを追加し、絶対にラッパーを配置し、その後、内側のdivのcontentEditableをすることによってこの問題を回避することができますように見えます。

他のヒント

ただ、サイドノートとして、ドキュメントに（やや悪い文書化）enableObjectResizingコマンドを送信することで、Firefoxの自動サイズ変更ハンドルの機能を無効にすることができます：

document.execCommand("enableObjectResizing", false, false);

私の知る限り、ドキュメントがロードされた後にこれが唯一の安全に行うことができ、かつ独立した機能であるグラバーを、無効にする私の知っている方法はありません。

Chrome 39 では、これらのハンドルは、望んでいたとしても存在しないようです。

Firefox では、単純に使用できます execCommand, 、ZoogieZorkが答えたように。

ただし、Internet Explorer ではこれをオフにすることはできません。これを回避する必要があります。

で ワイオミングエディター 開発、これが私が見つけたものです。

以下の結果が得られます。

  • IE では、サイズ変更 UI が一瞬表示されてから消えます。ユーザーがそれを使用する方法はないようです。
  • 画像は上で選択されたテキストです mouseup
  • 画像をドラッグする機能。一部のブラウザでは、ドラッグする前に選択する必要がある場合があります。前の項目でも書きましたが、簡単な mouseup 画像が選択されることになります。
  • 画像は、「コントロール選択」(サイズ変更 UI を提供するもの) ではなく、テキスト選択を使用して選択されます。

これは、何時間も深呼吸をした後に思いついた最高のものです。ハンドルを本当に削除したい場合は、これで十分だと思います。

IEの設定 oncontrolselect 戻る false 画像上では、実際にはこれらのハンドルが表示されないようにすることができます。次のハンドラーを画像にアタッチすることで、賢く実行できます。 mousedown イベント：

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

    if (evt.tagName.toLowerCase() === "img") {
        img = evt.target;
        img.oncontrolselect = returnFalse;
    }
}

実際には完全にうまく機能するわけではありません。あまりうまく機能しなかった理由は、画像上でドラッグ アンド ドロップ操作を開始するには、マウスを動かさずに一瞬押したままにし、その後しばらくマウスを動かし始める必要があったためです。ドラッグ。マウスを押してすぐにドラッグを開始すると、画像はその場所に留まり、ドラッグされません。

だから私はそんなことはしませんでした。

私がやったことは次のとおりです。すべてのブラウザで使用しました mouseup テキストにターゲット画像のみを選択します。非 IE および IE11 では、同期的に次のようになります。

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        selectSingleNode(img); // In my case, I used Rangy
    }
}

IE 7 ～ 10 では、非同期的に次のようになります。

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); // In my case, I used Rangy
    }, 0);
}

これにより、これらのハンドルが表示された後、すぐに消えるようになりました。これは、画像の「コントロール選択」が失われ、その選択が通常のテキスト選択に置き換えられるためです。

Internet Explorer 7 から 11 では、ハンドラーを dragend すべての選択を削除します。

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        deselect(); // I use Rangy for this, as well
    }
}

これにより、ドラッグ アンド ドロップ後に表示されるハンドルが消えます。

これがお役に立てば幸いですし、さらに改善できることを願っています。

あなたは、imgタグにのcontentEditable =「false」属性を追加することができます。

は、IE11のために（私はIEの古いバージョンをテストやりなさい、それがうまくいくような気がします）。これは、所定の位置にドラッグ＆ドロップを維持しながら行われてから、任意のリサイズを防ぐことができます。

...史上最高のちょうど修正

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

やあなたの入力/ IMGをラップ任意のHTML要素

魅力のようIE11で動作します。

私はちょうどその問題に直面しています。 私はdocument.execCommand("enableObjectResizing", false, false);を試みたが、移動アイコンが表示されてました。 e.preventDefault()イベントが発生したときにどのようなちょうど私の問題を解決するだけでonmousedownた。

element.onmousedown = function(e){
       e.preventDefault();
}

あなたがスタイルを追加しようとしたことがあります。

border: none;

のdivに？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top