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

CKEditor
スポンサーリンク

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

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

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

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

タグ名を取得

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

Pタグであれば true が返る

HTMLを取得

テキストを取得

要素内の置換え(テキスト)

要素内の置換え(HTML)

要素内にHTMLを追加

要素内にテキストを追加

data属性の取得や設定

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

クラスを追加、削除

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

属性を取得、削除、追加

要素の削除

子要素を取得

親要素を取得

次の要素を取得

余談

スナップショット

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

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

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

CKEditor
スポンサーリンク
adminをフォローする
STOCKCODE
タイトルとURLをコピーしました