CKEditor CDN( full )
※ 最大化ボタンをクリックして利用できます
CKEditor はダウンロード可能なソフトウェアですが、設置せずとも CKEditor CDN でホスティングされているライブラリを使用してすぐに使えるようになります。
CKEditor CDN( full ) では、WEBアプリの画面を作成するのを補助する事を想定しています( 特に、TABLE 要素のメンテナンスに優れています / 他も対話式やドラッグドロップ可能なコンテンツもあります )
また、この目的に特化する為、いくつかの拡張用のコードを追加しています。
1) 全ての HTML 要素を書ける
2) p 要素を自動挿入しない
3) localStorage に保存するボタンを追加
(保存するボタン用コマンド登録時に、modes プロパティでソース表示時にも実行可能にする)
<script src="//cdn.ckeditor.com/4.5.3/full/ckeditor.js"></script>
<textarea name="editor1"></textarea>
<style type="text/css">
.cke_button__mybutton_icon {
display: none !important;
}
.cke_button__mybutton_label {
display : inline !important;
}
</style>
<script>
editor = CKEDITOR.replace( 'editor1', {
allowedContent : true,
enterMode : CKEDITOR.ENTER_BR,
enableTabKeyTools : true
} );
editor.on( 'pluginsLoaded', function(){
editor.addCommand( 'svData', {
modes : { source : 1,wysiwyg : 1 },
exec : function( editor ) {
localStorage["_save_ck_code"] = editor.getData();
}
});
editor.ui.addToolbarGroup( "user" );
editor.ui.addButton( 'mybutton', {
label : '入力内容を保存', command : 'svData', toolbar: 'user'
} );
var editor_code = localStorage["_save_ck_code"];
if(typeof editor_code == 'string'){
editor.setData(localStorage["_save_ck_code"]);
}
});
</script>
ボタンのテキストを表示させる為に、強制的に CSS を変更していますが、ボタンのラベルがデフォルトで非表示となっている為です。( アイコンを利用したい場合は、background で指定し直します )
.cke_button_label {
display: none;
padding-left: 3px;
margin-top: 1px;
line-height: 17px;
vertical-align: middle;
float: left;
cursor: default;
color: #474747;
text-shadow: 0 1px 0 rgba(255,255,255,.5)
}
参考ページ
CKEDITOR.config
CKEDITOR.ui
CKEDITOR.editor
ボタンの追加だけでは、テキストがボタンに表示されなかったので、CSS で対応しています。
※ テンプレートは
そもそも、
Lightbox や Shadowbox のような JavaScript ライブラリはとてもかっこよく表示できるのでとても自己満足はできるのですが、イザその画像の詳細を見たくて実際のサイズで見たいときにはあまり意味がなかったり。特に、イラストを作った直後で、ブログに貼り付けてから再度見直したい時にはなんか違うなぁ(画像小さいし)・・・・なんて思う事もあったので、単純に大きく開くボタンを作ってはみたのですが、結構コードが長くて使いまわしがつらかったので作りました。
『関数にすれば?』
という意見も頭の中には少しあったのですが、このほうがイラスト毎に後から開いたウインドウの背景をカスタマイズできるので、これでいいかなと思いました。
▼ 通常ボタン
上で開くイラストは、背景が透過しているのでこんなふうにカスタマイズできます。
▼ インラインに JavaScript で背景を追加したカスタマイズボタン
5行目が追加部分です
愛の上鏡
2014 年現在の設定画面
一度登録していまっているので、初期画面がどうだったかは覚えていませんが、自分のドメイン側で『サブドメイン』を用意して登録するだけで良いと思います。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
