32

<p>Chrome で、2 つの の分離を削除して2 つの を結合すると、望ましくない動作が発生することを確認しました。タグは適切に結合されてい<p>ますが、Chrome は一番右の<p>タグのコンテンツを<span>.

編集p: これは、タグだけでなく、すべてのブロック要素で発生します。

例：

たとえば</p><p>、次のブロックから区切りが削除された場合:

<div contenteditable="true"><p>p one.</p><p>p two.</p></div>

あれは。。。になる：

<div contenteditable="true"><p>p one.<span style="font-size: 16px; line-height: 1.44;">p two.</span></p>

フィドルの例:で結合された のコンテンツをラップする Chrome<p><span>。

質問:

クロムがこれを行うのを防ぐ簡単な方法はありますか? それは、私が非常に取り除きたい恐ろしいマークアップをもたらします。

4

9 に答える 9

10

方法はありますが、いくつかのスタイルを積極的に設定する必要があります。アイデアは、スタイルが既に処理されていることを Chrome に伝えることです。そのため、スタイルの要件を満たすために SPAN を追加する必要はありません。基本的に、コンテンツ編集可能な div の下のスパン クラスに、クロムが追加されたスタイルを追加する必要があります (以下の例を参照)。

編集されたフィドル

あなたの例：

  • contenteditable DIV に「編集」クラスを追加しました
  • .edit p, spanスタイルにクラスを追加しました

これは次のようになります。

.edit {
  border: 1px solid gray;
  padding: 10px;
}
.edit p, span {
  line-height: 1.44; font-size: 16px;
}

そしてDIV：

<div contenteditable="true" class="edit">...</div>

通常は必要ないことに注意してくださいfont-size: 16px;。fiddle は contenteditable でフォント サイズを定義しているため、これを追加する必要がありました。スタンドアロンのページでは必要ありませんでした。

この Chrome の「パッチ」を、それが発生するすべての要素に適用する必要があります (したがって、UL、OL が必要な場合は、上記のロジック例に従って必要なものを追加してください)。

于 2013-03-05T01:40:24.563 に答える
6

私はそれを解決するための答えではないことを知っていますが、それを修正する方法のヒントです（しかし、私がそれをどのように解決するかについてのPetahの質問へのコメントになりたいと思っています）

一般に、そのようなバグがいつ発生する可能性があるかを確認します。作成の場合、すべてのイベントspanをリッスンし、キーがバックスペース/削除キーであるかどうか、または文字を挿入するすべてのキーが実際の選択であるかどうかを確認します。keydownkeypress

この場合、現在の選択 (挿入マークの位置、または実際の選択) を確認する必要があります。次に、次のテキスト要素またはノードがどれであるかがわかります。次に、次の を確認し、挿入マークの直後に作成されているかどうかを確認する必要がkeypressありますkeyup。spanブラウザのバグによっては、さらにチェックする必要があります。作成されたコンテンツがある場合は、そのコンテンツを再度アンラップします。追加Mutationのイベントとヘルパー属性を使用できます。

しかし、私はこれを自分で行うことをあきらめて、ckeditor 4に切り替えたと言わなければなりません。ほとんどの機能は必要ありません。これは本当に大きなライブラリです。しかし、そのようなバグが非常に多いため、別の解決策が見つかりませんでした。

EDIT ここでは、ミュータブルイベントでアイデアを示すjsフィドルの更新： http://jsfiddle.net/THPmr/6/

しかし、それは防弾ではなく、それがどのように達成されるかを示すためのものです（クロム27.0.1422.0でのみテストされ、2番目に複数のテキスト要素が含まれている場合はおそらく機能しませんp）

于 2013-02-26T09:53:50.273 に答える
4

余分なスパンを削除することについての私の見解は次のとおりです

document.querySelector('[contenteditable=true]')
  .addEventListener('DOMNodeInserted', function(event) {
    if (event.target.tagName == 'SPAN') {
      event.target.outerHTML = event.target.innerHTML;
    }
  });
于 2016-06-04T21:49:01.460 に答える
3

CSS は、contenteditable 内でマークアップを作成する方法に影響を与えています。

div, pre { ボーダー: 1px 単色グレー; パディング: 10px; 行の高さ: 1.44; }

行の高さの行を削除すると、問題は発生しなくなります。

一般に、デフォルトのスタイリングに関連する contenteditable にはいくつかのバグがあります。

EDIT JsFiddle IS は、その CSS (normalize.css) のために間接的にこれに影響を与えています (tinkerbin の動作は異なります)。これを試して：

  1. フィドルを実行する
  2. 検査する<p>
  3. font-size行の高さを含め、CSS スタック内のすべての宣言を無効にします
  4. バックスペースを行う
  5. インラインスパンはありません

解決策 1 : クラスと ID を使用します。

pまたはdivのfont-size を宣言しないp.main-contentでください.main-content。contenteditable 内の要素のフォント サイズがブラウザの内部デフォルト CSS に由来する場合、Chrome は余分なマークアップ/インライン スタイルを追加しません。

解決策 2 : サニタイザーを使用します。

一般的なタグでフォントサイズとタイプミスを指定することは決して良い習慣ではないので、私は個人的に#1に行きます.

于 2013-02-26T10:40:14.963 に答える
3

これまでに見つけた最善の方法は、DOMNodeInserted をリッスンして、tagName を確認することです。スパンの場合は、タグを削除して内容を残すことができます。これにより、カーソルが正しい場所に保持されます。

function unwrap(el, target) {
    if ( !target ) {
        target = el.parentNode;
    }
    while (el.firstChild) {
        target.appendChild(el.firstChild);
    }
    el.parentNode.removeChild(el);
}

var AutoFix = true;

document.getElementById('editable')
.addEventListener('DOMNodeInserted', function(ev) {
    if ( !AutoFix ) {
        return;
    }
    if ( ev.target.tagName=='SPAN' ) {
        unwrap(ev.target);
    }
});

ブール値の「AutoFix」を追加したので、スパンを挿入する必要があるときに自動 dom 変更を無効にできます。これは、このイベントが dom 変更で発生するためです。たとえば、ユーザーが <span class="highlight">...</span> のようなものを挿入できるツールバーがあるとします。

私が見る限り、コードには IE または FireFox での副作用はありません。

于 2014-09-03T14:56:31.143 に答える
1

これも私を苛立たせましたが、今のところ十分に機能する解決策を見つけました。

$('#container span').filter(function() {
    $(this).removeAttr("style");
    return $(this).html().trim().length == 0;
}).remove();

span 要素からスタイル タグを削除し、空の場合は完全に削除します。おそらく属性スタイルに基づいてフィルタリングできますが、空のスパンを削除するためにチェックするループを既に実行しているため、両方を同時に実行するのが最善であると考えました.

クロムが最初にスパンに継承されたスタイルを挿入しようとしたときに、マイクロ秒のちらつきが発生しますが、削除直後に一度だけ表示されます。

完璧ではありませんが、迅速かつ簡潔です。

于 2015-02-28T22:25:32.020 に答える
0

誰かのブログに投稿されたコメントからこのリンクを見つけました:

(最新の WebKit バージョンが span 要素を生成するバグを修正しました…) https://github.com/tinymce/tinymce/commit/8e6422aefa9b6cc526a218559eaf036f1d2868cf

于 2014-04-28T07:49:55.670 に答える
0

Please see the answers here: https://stackoverflow.com/a/24494280/2615633 To fix the problem you may just use this plugin: jquery.chromeinsertfix

于 2014-06-30T23:06:19.873 に答える