CKEditorのカスタマイズ（選択要素の属性などを操作する）

今回使用するHTMLコードはこれ。

まずはCKエディターのインスタンスを取得。

// instanceReadyイベントはCKエディターインスタンスの準備ができた時に発火する
CKEDITOR.on('instanceReady', function( ev ){

	// エディターが1つだけの場合
	var editor = ev.editor;
	
	// エディターが複数あり、それぞれ処理を分けたい場合
	if(ev.editor.name == 'myEditor') {
		var editor = ev.editor;
	} else if(ev.editor.name == 'myEditor2') {
		var editor = ev.editor;
	}
})

// 好きなタイミングで取得する場合
// var editor = CKEDITOR.instances.{テキストエリアのID名};
var editor = CKEDITOR.instances.myEditor;

次に「選択されている要素」、または「カーソルが当たっている要素」を取得します。

var element = editor.getSelection().getStartElement();

要素を操作する準備ができたので、
ここからは属性を取得したり、追加したりする方法です。
詳しくは公式ドキュメント（英語）を参照
docs.ckeditor.com/#!/api/CKEDITOR.dom.element

タグ名を取得

element.getName(); // 返り値は p や span 等

特定のタグであるかどうか

Pタグであれば true が返る

element.is('p'); // true||false 

HTMLを取得

element.getHtml(); // 選択要素自身のタグは含まない。
element.getOuterHtml(); //選択要素自身のタグを含む。

テキストを取得

element.getText(); // タグは含まない

要素内の置換え（テキスト）

element.setText('テキストです');

要素内の置換え（HTML）

element.setHtml('これは太字です');

要素内にHTMLを追加

element.appendHtml('これは太字です');

要素内にテキストを追加

element.appendText('テキストです');

data属性の取得や設定

element.data( 'extra-info', 'test' ); // 設定
element.data( 'extra-info' ); // 取得

※エディター内の画像には「data-cke-saved-src=””」が付与されているから「src=””」だけ変えると不具合が起きる可能性ある。
※リンクも同様（data-cke-saved-href=””）

クラスを追加、削除

element.addClass('classA');
element.removeClass('classA');

スタイルを取得、削除、追加

// 

element.getStyle(); // 取得　返り値：margin:0;padding:0;
element.removeStyle('margin'); // 削除
element.setStyle('margin', '10px'); // 1つ追加
element.setStyles({ padding:'10px', 'float': 'left' }); // まとめて追加

属性を取得、削除、追加

element.getAttribute('type'); //取得
element.setAttribute('title', 'タイトル設定'); // 1つ設定
element.setAttributes({ title: 'タイトル名', 'class', 'myClass' }); // 複数設定
element.removeAttribute('title'); // 1つ削除
element.removeAttributes(['title', 'class']); // 複数削除

要素の削除

element.remove(); // 中身ごと削除
element.remove(true); // 中身は残す

子要素を取得

element.find('span');

親要素を取得

element.getParent();

次の要素を取得

element.getNext();

余談

スナップショット

editor.addCommand()でいろいろ操作した場合、エディターの戻る進むが上手く動作しなかったと思う。
その時は要素の操作が終わったタイミングで、セーブポイント？を保存する。

editor.fire('saveSnapshot');

要素を作成して追加とか置換

以下のような感じで要素を作って、スタイル等を適用して追加もできる。

	var element;
	element = CKEDITOR.dom.element.createFromHtml( '' );
	element.setStyle('margin', '10px');
	element.setAttribute('src', '画像パス');
	editor.insertElement(element); // 追加