今回使用するHTMLコードはこれ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="./ckeditor/ckeditor.js"></script> <script> CKEDITOR.on('instanceReady', function( ev ){ // instanceReadyイベントはCKエディターインスタンスの準備ができた時に発火する // ここに処理を書いていく }) </script> </head> <body> <textarea class="ckeditor" id="myEditor"></textarea> </body> </html> |
まずはCKエディターのインスタンスを取得。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 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; |
次に「選択されている要素」、または「カーソルが当たっている要素」を取得します。
|
1 |
var element = editor.getSelection().getStartElement(); |
要素を操作する準備ができたので、
ここからは属性を取得したり、追加したりする方法です。
詳しくは公式ドキュメント（英語）を参照
docs.ckeditor.com/#!/api/CKEDITOR.dom.element
タグ名を取得
|
1 |
element.getName(); // 返り値は p や span 等 |
特定のタグであるかどうか
Pタグであれば true が返る
|
1 |
element.is('p'); // true||false |
HTMLを取得
|
1 2 |
element.getHtml(); // 選択要素自身のタグは含まない。 element.getOuterHtml(); //選択要素自身のタグを含む。 |
テキストを取得
|
1 |
element.getText(); // タグは含まない |
要素内の置換え（テキスト）
|
1 |
element.setText('テキストです'); |
要素内の置換え（HTML）
|
1 |
element.setHtml('<span>これは<b>太字</b>です</span>'); |
要素内にHTMLを追加
|
1 |
element.appendHtml('<span>これは<b>太字</b>です</span>'); |
要素内にテキストを追加
|
1 |
element.appendText('テキストです'); |
data属性の取得や設定
|
1 2 |
element.data( 'extra-info', 'test' ); // 設定 element.data( 'extra-info' ); // 取得 |
※エディター内の画像には「data-cke-saved-src=””」が付与されているから「src=””」だけ変えると不具合が起きる可能性ある。
※リンクも同様（data-cke-saved-href=””）
クラスを追加、削除
|
1 2 |
element.addClass('classA'); element.removeClass('classA'); |
スタイルを取得、削除、追加
|
1 2 3 4 5 |
// <p style="margin:0;padding:0;"></p> element.getStyle(); // 取得 返り値：margin:0;padding:0; element.removeStyle('margin'); // 削除 element.setStyle('margin', '10px'); // 1つ追加 element.setStyles({ padding:'10px', 'float': 'left' }); // まとめて追加 |
属性を取得、削除、追加
|
1 2 3 4 5 |
element.getAttribute('type'); //取得 element.setAttribute('title', 'タイトル設定'); // 1つ設定 element.setAttributes({ title: 'タイトル名', 'class', 'myClass' }); // 複数設定 element.removeAttribute('title'); // 1つ削除 element.removeAttributes(['title', 'class']); // 複数削除 |
要素の削除
|
1 2 |
element.remove(); // 中身ごと削除 element.remove(true); // 中身は残す |
子要素を取得
|
1 |
element.find('span'); |
親要素を取得
|
1 |
element.getParent(); |
次の要素を取得
|
1 |
element.getNext(); |
余談
スナップショット
editor.addCommand()でいろいろ操作した場合、エディターの戻る進むが上手く動作しなかったと思う。
その時は要素の操作が終わったタイミングで、セーブポイント？を保存する。
|
1 |
editor.fire('saveSnapshot'); |
要素を作成して追加とか置換
以下のような感じで要素を作って、スタイル等を適用して追加もできる。
|
1 2 3 4 5 |
var element; element = CKEDITOR.dom.element.createFromHtml( '<img />' ); element.setStyle('margin', '10px'); element.setAttribute('src', '画像パス'); editor.insertElement(element); // 追加 |
