Drupal 向け CKEditor TextSelection:ソースモードへの切り替え時にカーソルと選択範囲を保持する

このモジュールの機能

CKEditor TextSelection は、CKEditor 5 の「Text Selection」プラグインを Drupal の CKEditor 5 エディターに統合する Drupal モジュールです。主な目的はシンプルで、WYSIWYG と ソースモードを切り替える際にカーソル位置とテキスト選択範囲を保持すること、そして選択範囲を表示領域内へスクロールして見えるように保つことです。

• WYSIWYG ↔ ソースの切り替えをまたいでカーソル位置を保持します。
• (カーソルだけでなく)実際のテキスト選択範囲を保持します。
• 両方のモードで選択範囲が見えるように表示領域をスクロールします。
• より快適なソース編集体験のために CKEditor CodeMirror Source Editing と組み合わせて快適に動作します。
• クラシックな CKEditor 4 アドオンの動作にインスパイアされています: CKEditor 4 TextSelection 。

なぜ重要なのか(実際に時間を節約する UX の細部)

編集者がソースモードに切り替えるのには正当な理由があります。貼り付けたマークアップの整理、リンク属性の調整、リスト構造の修正、見出しの確認、あるいは HTML が意図どおりであることの確認などです。切り替えるたびに選択範囲やカーソルを失うと摩擦が生じます — 特に長い記事では顕著です。このモジュールの目的はシンプルで、あなたを作業の流れの中に留めておくことです。

仕組み(概要)

WYSIWYG からソースモードへ切り替えると、プラグインは現在のカーソル位置または選択範囲を、エディターのモデルから HTML ソース内の対応する位置へマッピングします。元に戻すときは、ソースモードでのカーソル/選択範囲を読み取り、リッチテキストエディター内に復元します。完全にマッピングできない場合(エッジケースは起こり得ます)でも、エディターを壊すことなく適切にフォールバックします。

試してみる(デモ)

基盤となる CKEditor 5 プラグインの動作を見たいですか? デモを開いてフレーズを選択し、ソースに切り替えて、選択範囲がそのまま保たれる様子をご覧ください: CKEditor 5 Text Selection Plugin Demo 。

Drupal プロジェクトのリンク

• プロジェクトページ: https://www.drupal.org/project/ckeditor_textselection 
• リリース: https://www.drupal.org/project/ckeditor_textselection/releases (最新バージョンと互換性に関する注意事項はこちらを確認してください)
• Git の手順(clone/patch ワークフロー): https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Issue: https://www.drupal.org/project/issues/ckeditor_textselection 

インストール

1)Composer でインストール

Composer を使ってモジュールをインストールします(推奨)。特定のバージョンが必要な場合は、リリースページ から選んでください。

composer require drupal/ckeditor_textselection

2)モジュールを有効化

CKEditor TextSelection を、他のコントリビュートモジュールと同じように有効化します(UI または Drush)。

3)テキストフォーマットで有効化

1. Administration → Configuration → Content authoring → Text formats and editors に移動します。
2. CKEditor 5 を使用しているフォーマットを開きます。
3. CKEditor 5 の設定で Text Selection プラグインを有効化します。
4. ツールバーに Source editing ボタンが利用可能であることを確認します(切り替えにはソースモードが必要です)。
5. テキストフォーマットの設定を保存します。

4)完了

追加の設定は不要です。有効化すると、モードを切り替えるたびに選択範囲の保持が自動的に機能します。

CodeMirror Source Editing との併用

編集チームがソースモードでの構文ハイライトを好む場合は、このモジュールを CKEditor CodeMirror Source Editing と組み合わせてください。これにより、選択範囲の保持を損なうことなく可読性が向上します。

内部の仕組み:アップストリームのプロジェクト

この Drupal モジュールは、アップストリームの CKEditor 5 プラグインを中心に構築されています。それを確認したり貢献したりしたい場合は:

• GitHub リポジトリ: https://github.com/levmyshkin/ckeditor5-textselection 
• Packagist パッケージ: https://packagist.org/packages/levmyshkin/ckeditor5-textselection 

フィードバックと貢献を歓迎します

Drupal の編集者、サイトビルダー、開発者からのフィードバックをお待ちしています — 特に、WYSIWYG と HTML の間で選択範囲のマッピングが曖昧になり得る難しいエッジケースについて。ぜひ知見を共有し、Issue を立て、あるいは貢献してください: CKEditor TextSelection on Drupal.org 。