SQLの窓

2015年09月18日


CKEditor CDN を使用して、簡単に HTML コンテンツ作成エディタを利用できます

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 で対応しています。




【WEBサービスの最新記事】
posted by lightbox at 2015-09-18 18:20 | WEBサービス | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり