web-dev-qa-db-ja.com

contenteditable divで要素の選択とサイズ変更を無効にする方法は？

例えば。次のレイアウトがあります。

<div contenteditable="true">
   <span class="text-block" contenteditable="false">
      <span contenteditable="false">Name</span>
      <a href="javascript:void(0)">
          <i class="small-icon-remove"></i>
      </a>
   </span>
​</div>

だから、これを無効にする方法：

enter image description here

この：

enter image description here

javascripthtmlcssinternet-explorercontenteditable
30
Andrei

CKEditor 's widgets でコントロールの選択を完全に非表示にしようとするとき（これがその方法です）、私はこれに多くの時間を費やしました。残念ながら、良いニュースはありません。

解決策1

まず、 mscontrolselect イベントがあります。私がそれを見つけたとき（そしてその名前にmsプレフィックスが付いているという事実）、 MSによると なので、それは防止できるはずなので、とても嬉しかったです。

しかし、それは完全に不安定であることがわかりました。発射される場合もあれば、発射されない場合もあります。 IEのバージョン、DOM構造、属性、クリックする要素、ブロック要素などによって異なります。通常のMSのがらくたです。しかし、あなたは試すことができます：

function controlselectHandler(evt) {
    evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);

ただし、これにより選択が完全にブロックされます（機能した場合）。したがって、これらの要素をまったく選択不可にします。

解決策2

次に、より信頼性の高い2番目のオプションがあります。そのような要素がクリックされた後、選択を別の場所に移動します。これを実装する方法はいくつかあります。 CKEditorでは、mousedown...とmouseupの選択を修正しています。これも（再度）IEの場合は十分ではなく、多くの条件に依存するため） 。また、selectionchangeイベントをリッスンして、そこで選択を修正することもできます。

ただし、繰り返しになりますが、このような要素の選択をブロックすることについても話します。

解決策3

したがって、3番目のオプションは、選択ではなくresizestartイベントをブロックすることです。 CKEditorはこれをenableObjectResizingコマンドと組み合わせます： https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218 このソリューションはサイズ変更を防ぎますが、もちろんこれらの醜い境界を隠しません。

解決策4

先ほど触れたように、CKEditorでこの問題に取り組みました。私たちは、編集可能な要素の中に編集不可能な要素を含めることを可能にしましたが、ブラウザ間で完全に制御可能で統一された動作を備えています。完全なソリューションは複雑すぎてStackOverflowで説明できず、実装に数か月かかりました。この機能をウィジェットと呼びます。 こちらのデモ を参照してください。ご覧のとおり、編集不可能な要素が選択されている場合、コントロールは選択されていません。選択はmousedownとmouseupの間にのみ表示されますが、特定の場合のみです。それを除いて、すべてがネイティブのように機能します（完全に偽物ですが）。

詳細は ウィジェットの概要 および ウィジェットチュートリアル を参照してください。

24
Reinmar

この投稿は、私にとってこの問題を解決する際に重要でした（tinyMCEで機能します）。

contentEditableとサイズスタイルでdivのサイズ変更ハンドルと境界線を削除する方法

Contenteditable DIVをnoncontenteditable DIV内に配置することにより、ハンドルはIEまたはFFに表示されませんが、コンテンツを編集できます）

例.

<div class="outerContainer" contenteditable="false">
    <div class="innerContainer" contenteditable="true">
    </div>
</div>
10
Baron

ソリューション5

フォーカスが子コントロールに移動したら、コンテンツの編集可能な要素の属性値をfalseに変更します。同様に、フォーカスが子コントロールから離れたら、コンテンツのeditableをtrueに設定します。

5
user3698559

サイズ変更ハンドルを無効にするには、IE11に次のコードを追加するだけです。

div {
    pointer-events: none;
}

Firefoxでcontenteditable要素が挿入された後にこの行を実行すると、機能します。

document.execCommand("enableObjectResizing", false, false);
3
Kevin Lee

私の問題を解決したのは、max-width: 100% !important;contenteditable DIV内のDOM要素のCSSプロパティからの行。それが役に立てば幸い！

ところで、これはMSエッジでは発生しません...指が交差して、MSによって正しい方向の動きを示しています:)

1
Federico Cismondi

IE11のCKEditor 4.4.7でも同じ問題があります。回避策として、「マウスダウン」で要素の現在の寸法を保存し、「最小幅」、「最大幅」、「最小高さ」、および「最大高さ」スタイルプロパティを現在の寸法に設定します。これにより、要素はサイズ変更時に元のサイズで表示されます。 「マウス」で、変更した要素のスタイルプロパティを復元します。これが私のコードです：

$('textarea').ckeditor().on('instanceReady.ckeditor', function(event, editor) {
    var $doc = $(editor.document.$);
    $doc.on("mousedown", "table,img", function() {
        var $this = $(this);
        var widthAttrValue = $this.attr("width");
        if (widthAttrValue) {
            $this.data("widthAttrValue", widthAttrValue);
        }
        var widthStyleValue = this.style.width;
        if (widthStyleValue) {
            $this.data("widthStyleValue", widthStyleValue);
        }
        var width = widthStyleValue || widthAttrValue || String($this.width())+"px";
        var height = this.style.height || $this.attr("height") || String($this.height())+"px";
        $this.css({
            "min-width": width,
            "max-width": width,
            "min-height": height,
            "max-height": height,                                       
        });
        $doc.data("mouseDownElem",$this);
    }).on("mouseup", function() {
        var $elem = $doc.data("mouseDownElem");
        if ($elem) {
            $elem.removeAttr("height").css("height","");
            var widthAttrValue = $elem.data("widthAttrValue");
            if (widthAttrValue) {
                $elem.attr("width", widthAttrValue);
                $elem.removeData("widthAttrValue");
            } else {
                $elem.removeAttr("width");
            }
            var widthStyleValue = $elem.data("widthStyleValue");
            if (widthStyleValue) {                                      
                $elem.removeData("widthStyleValue");
            } 
            $elem.css({
                "min-width":"",
                "max-width":"",
                "min-height":"",
                "max-height":"",
                "width": widthStyleValue || ""
            });
            if (!$.trim($elem.attr("style"))) {
                $elem.removeAttr("style");
            }
            $doc.removeData("mouseDownElem");
        }
    });
});
1
Christof

「オーバーフロー：非表示;」また、次のようなこの問題を引き起こす可能性があります：

ul, ol {
  overflow: hidden;
}
1
Oleg Zemelia Raban

私も同じ問題を抱えていました。ここの以前の投稿から、IEが認識し、この段落のフォーカス/サイズ変更を追加する特定の動作があるようです。私にとっては、contenteditible div内に段落のスタイルがあったためです。

削除：

div[contenteditble="true"] p{
   min-height:1em;
}

私のために修正しました。

1
user1364467

解決しました！コンテンツ編集不可のスパンをコンテンツ編集可能[〜＃〜] body [〜＃〜]内に配置すると、サイズ変更可能[〜＃〜] span [ 〜＃〜]コンテナ。私の問題を修正したのは、内側の[〜＃〜] span [〜＃〜]タグの単純な1行CSSスタイルpointer-events：none;でした。

min-width: 1.5cm;
display: inline-block;
pointer-events: none;
<body content-editable="true">
  <span>Sample Text</span>
</body>
0
Mohtashim Shamsi

ここや他のスレッドで推奨されているものは他にありませんでしたが、次のようにして解決しました：

[contenteditable="true"] p:empty {
    display: inline-block;
}

このようにして、サイズ変更ボックスは消えましたが、カーソルをPブロックの下またはPブロックに置いて編集することができました。

0
Ezra

Contenteditable内のすべての子要素にmax-widthのCSSルールを適用したため、同じ問題が発生しました。それを削除するか、画像に制限することでうまくいきました。

[contenteditable] * { max-width: 100%; } // causes the issue
[contenteditable] img { max-width: 100%; } // works fine for me

<p>要素は、max-widthプロパティの影響を受けます。

0
retoheusser

この問題を解決するために私がやったことは次のとおりです。私にとっては、これはcontenteditable要素が空の場合にのみ発生し、コンテンツがあるとサイズ変更ハンドルが表示されなくなるため、これを行うために次のCSSのみのソリューションを作成しました。

[contenteditable]:empty:after {
  content: " ";
}

ソリューションの背後にあるアイデアは、contenteditableフィールドが空の場合は常に空白の疑似要素を適用するため、ユーザーがcontenteditableフィールドを選択したときにサイズ変更タグが表示されないようにします。ユーザーが何かを入力すると、疑似要素が消えます。

疑似要素を使用しているため、この修正はIE9以降でのみ機能します。

0
Nej Kutcharian