0

ユーザーが CKEditor コンテンツ インスタンスにテキストを入力するときに、オンザフライで文の最初の文字を大文字にしたいと考えています。

この戦略は、各キーストロークをキャッチし、必要に応じてそれを置き換えようとすることにあります。たとえば、挿入された文字がドットとスペースの後に続く場合です。イベントをキャッチすることには問題ありませんが、キャレット位置の周囲の文字を解析する方法が見つかりません:

var instance = CKEDITOR.instances.htmlarea
instance.document.getBody().on('keyup', function(event) {
    console.log(event);
    // Would like to parse here from the event object...
    event.data.preventDefault();
});

戦略の代替案を含め、どんな助けでも大歓迎です。

4

2 に答える 2

4

イベントを使用する必要がありますkeydown（提案したものに近い）：

var editor = CKEDITOR.instances.editor1;

editor.document.getBody().on('keydown', function(event) {
    if (event.data.getKeystroke() === 65 /*a*/ && isFirstLetter()) {
        // insert 'A' instead of 'a'
        editor.insertText('A');
        event.data.preventDefault();
    }
});

今 - どのようisFirstLetter()に見えるべきですか？

  1. editor.getSelection().getRanges()キャレットの位置を取得するには、開始する必要があります。
  2. コレクションの最初の範囲のみに関心があります。
  3. キャレットの前からテキスト コンテンツを抽出するには、小さなトリックを使用します。
    • 範囲の先頭をドキュメントの先頭に移動: range.setStartAt( editor.document.getBody(), CKEDITOR.POSITION_AFTER_START ),
    • CKEDITOR.dom.walkerDOM ツリーをソース順にトラバースするために使用します。
    • テキスト ノードを収集し、キャレットの前にあるものを見つけます (それは/\. $/ですか) - インライン タグをスキップし、ブロック タグで停止する必要があることに注意してください - ヒント: 関数から戻っfalseてguardトラバースを停止します。

walkeronの使用例range:

var range, walker, node;

range = editor.getSelection().getRanges()[0];
range.setStartAt(editor.document.getBody(), CKEDITOR.POSITION_AFTER_START);
walker = new CKEDITOR.dom.walker(range);
walker.guard = function(node) {
    console.log(node);
};

while (node = walker.previous()) {}

そして今、悲しいことはほとんどありません。

  • 入力時に選択が空であると想定しましたが、そうである必要はありません。選択が折りたたまれていない (空である) 場合は、 を呼び出す前にそのコンテンツを手動で削除する必要がありますinsertText。これを行うために使用できますrange#deleteContents。
  • しかし、これだけではありません。範囲のコンテンツを削除した後、キャレットを正しい位置に配置する必要があります。これは簡単なことではありません。基本的にはrange#select（ の後の範囲でdeleteContents）使用できますが、場合によっては、段落間のようにキャレットを間違った場所に配置することがあります。これを修正することは... HTML+編集可能+挿入+その他についての深い知識がなければ実行できません:)。
  • この解決策は完全ではありません -pasteイベントを処理したり、コンテンツを削除したり (文頭から単語を削除することができます) などを行う必要があります。
  • 私が考えもしなかった他のいくつかの問題があると思います:P.

したがって、このアプローチは現実的ではありません。それでもこの機能を実装したい場合は、タイマーを設定し、DOM をトラバースして (walkerドキュメント全体または最近入力したテキスト (どこにあるかを見つけるのが難しい) を含む範囲で使用できます)、小文字から始まるすべての文を見つける必要があると思いますそしてそれらを修正します。

于 2012-06-27T16:33:52.823 に答える