CKEditor

CKEditorのダイアログ中のテキストをJSで置換する方法(試行錯誤の記録)

【結論】 ・CKEditorのダイアログ中のテキストは、idが固定では無く、classは別のダイアログと共通化されているので、それらを使って文字の置換が困難 ・ダイアログ(JavaScript)の生成にフックするdialogDefinition イベントにコールバックを設定し動的に…

CKEditorのテンプレート機能で、ブロック要素に改行(br)が勝手に入るのを防ぐ方法

【結論】 ・CKEditorのテンプレート機能でHTMLをエディタ上に挿入する際、要素が含めれていないブロック要素内に、<br>タグが勝手に挿入されてしまう問題がある。 ・対策としては、挿入するHTMLに対して、class(またはid)を設定し、そのclassのCSSに<br>タグをdisp…

CKEditor4で自作テンプレートを作成する方法

【結論】 ・CKEditorでは、あらかじめ用意された雛形を元に文章を作成するテンプレート機能が実装されている ・テンプレートは標準のものの他、自身で自作することも可能 ・自作する場合は、HTML形式で記述する 【目次】 CKEditorのテンプレート機能について…

CKEditorの編集領域でpタグにmarginが設定されてしまうのを回避する方法

【結論】 ・デCKEditorでは、デフォルトの書式で入力した文章はpタグで出力されるが、ブラウザCSSによってmarginが設定されてしまい、意図せぬ空白が生まれてしまう ・divタグであれば、ブラウザCSSによる影響を受けないので、書式を「標準(div)」にすれば、…

CKeditor4の機能拡張方法(ドラック&ドロップ・動画埋め込み・カスタムスタイル)

【結論】 ・uploadfileを導入すれば、ドラック&ドロップでアップロードも可能になる。 ・embedを導入すれば、YouTubeなどの動画メディアを埋め込める。autoembedを導入すれば、リンクを貼り付けるだけで自動で埋め込める。 ・画像を均等に横並びさせるなど…

CKEditor4の導入とカスタマイズ方法

【結論】 ・CKEditor4はCDN経由で読み込む事が可能 ・デフォルトの設定であれば、JavaScriptのコードを一行記述するだけで、実装可能 ・ツールバーのカスタマイズも、公式サイトでコードを自動生成してくれる 【目次】 CKEditor4の導入方法とカスタマイズ方…

CKEditorについて

【結論】 ・CKEditorとは、 WYSIWYGエディタの一種 ・WYSIWYGエディタは ユーザーにリッチな編集画面を 提供する為のインターフェイス ・CKEditorは、WYSIWYGエディタの中でも古株で シンプルな構造から、多く利用されている。 【目次】 CKEditorについて 導…