2

プロジェクト用に小さな「インプレース エディター」をコーディングしていますが、フォーカスの維持とぼかしに関する 2 つの問題に遭遇しました。私は自分の問題をよりよく説明するためにフィドルを作りました:

http://jsfiddle.net/distractedBySquirrels/ufbtC/

(1) 要素内をクリックするcontenteditableと、小さなツールバーが表示されます。ツールバーをクリックすると、現在編集中の要素が短時間フォーカスを失います。それを回避する方法はありますか？（実際にはUXの問題です）

(2) ツールバーが消えるはずblurです。しかし、これによりツールバーが機能しなくなります。ツールバーの何かをクリックすると、blurイベントが発生します...ユーザーがツールバーをクリックしたときにぼやけないようにするための(ちょっとした)ベストプラクティスは何ですか?

前もって感謝します、

セバスチャン

4

2 に答える 2

4

解決策は非常に簡単です...「メニューを保護する」ためにタイムアウトを追加するだけです。フィドルを更新しました。

    protect: function (e) {
        e.preventDefault()
        return setTimeout(300)
    }
于 2012-08-31T13:04:27.967 に答える
1

あなたは深刻な問題に遭遇しました :) まともな wysiwyg エディタに向かう途中の maaany の 1 つ。

CKEditor では、次の方法で解決しました。

  1. focusManager - 最初に、エディターの UI の一部である要素を登録します。次に、これらの要素のぼかし/フォーカス イベントをリッスンします。3 つ目は、blur イベントの直後にフォーカスが発生する可能性があるため、しばらく待ちます。4 番目に、カスタムの fire/blur イベントを (DOM 要素ではなくエディター インスタンスで) 発生させ、ツールバーなどをリッスンします。

  2. 2 番目の部分は、CKEditor 4 ベータ版ではスキップしたと思いますが、選択マークを編集可能に保持しています。これは、ほとんどのブラウザーでは、ツールバーでクリックした後でも、選択 (視覚的であっても) が編集可能に保持されるためです。おそらく、いくつかの特別な属性/JS コードを使用して、そこに選択が移動しないようにしているからでしょう - 残念ながらわかりません。

  3. 最後に、選択範囲を編集可能にロックします。フォーカスをツールバーに移動しても失われるべきではありません.IEとOperaはここで失敗すると思います. CKEDITOR.dom.selectionそのため、選択をロックおよび復元するための特別なメソッドが用意されています。これらはfocus/blur、編集可能オブジェクトのリスナーによって使用されます。

于 2012-08-31T13:50:51.983 に答える