CKEditor5でAttribute付与する時の名称の調べ方

結論

まずCKEditor5を呼び出すページで以下のスクリプトを読み込みます。

<script src="./node_modules/@ckeditor/ckeditor5-inspector/build/inspector.js"></script>

CKEditor5の初期化時に以下の処理を追加します。

ClassicEditor
    .create(document.querySelector("#editor"), config)
    .then(editor => {
        // 以下を追加
        CKEditorInspector.attach(editor);
    });

すると、エディタ下部に検証用のタブが出てきます。

そこでソースモード等を使って、追加したいattributeを直接打ち込みます。
（※ 前記事の方法で属性の追加は許可されてるものとします。）

ここで、Modelタブを選択し、attributeを設定したいタグをクリックすると、右枠のInspectの、Attributes欄に必要な属性の指定が書かれています。

やりたかったこと

CKEditor5のInsertImageCommandを使用する際に、title属性を付与したいことがあり、以下のようなコマンドを作成したものの、titleが付与されないということがありました。

editor.execute('insertImage', {
	source: [
		{
			src: 'path/to/image.jpg',
			alt: 'example alt',
			title: 'example alt'
		}
	]
});

以前同じようなことがあり、調べた記事（CKEditor5でclass付与するのが大変な話）の時みたいにソースコード探さないと駄目か…と思っていたのですが、検証機能を使えばもっと簡単に調べることが出来ることが分かりました。

ちなみに、title属性を追加したい場合は結論に添付の画像を参考に、以下のようにすればOKです。

editor.execute('insertImage', {
	source: [
		{
			src: 'path/to/image.jpg',
			alt: 'example alt',
			htmlImgAttributes: { // 以下3行を追加
				attributes: { title: 'example title' },
			}
		}
	]
});

おわりに

It allows you to observe changes to the data structures and the selection live in the editor, which is particularly helpful when developing new rich-text editor features or getting to understand the existing ones.

CKEditor 5 inspectorより引用

ちゃんと「データ構造をの変更等をライブで確認できるぜ」的なことが書いてありました。
もっと早く見つけたかった。つよつよエンジニア兼英語ネイティブになりたい。