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サービスの最新記事】
- #ZOOM #アバター #ベータ版
- ロリポップの phpMyAdmin の SQL 入力部分のフォントを変更する( Google Chrome のデベロッパーツールを利用 )
- utf8 文字ツール の 文字参照リンクの作成方法
- Windows 用 curl で、Googls Photo API を呼び出して画像の baseUrl を取得する
- WordPress の リダイレクト用のコードを作成する PHP / パーマリンクが数字だけだったので、投稿名を追加してから
- 無料SSL(Let's Encrypt) : [さくらインターネット]SSLサーバ証明書発行のお知らせ
- イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox
- フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント
- フリーフォントでボタン素材作成
- というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました
- 電力自由化 : 関西向け東電プレミアムプラン シュミレーション
- Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得
- livedoor Blog で、Twitter カードを使用する
- livedoor Blog で、Facebook の『シェアボタンを表示する』
- 画像を大きく見る為のウインドウを開くボタンの作成するサービス
- フリーフォントで簡単ロゴ作成の『横書きページで』文字の中央に鏡を置いたような結果を反映させられるようにしました。フリーフォントの種類によって、みんな違うものになります。
- bit.ly の短縮URLのドメイン部分に自分のサブドメイン(Branded Short Domain)を使用する
- Google のカスタム検索の結果と、通常の site: 検索の結果が同じにならないので、後者でしばらく様子を見る事に
- 自分の著作では無い写真を、Twitter 経由でブログに埋め込む時の一考。Google+ も使ってみると、元記事消えても画像は残るかもしれない・・・
- ＨＴＭＬ整形ツール / 属性単位の改行機能付き
