小山太郎.com

Mar 09

CKEditorのツールバーをカスタマイズ

CKEditorのツールバーをカスタマイズしてみます。

複数のCKEditorを１ページに用いることも可能で、それぞれ異なるツールバーを入れることも考えてみます。

各CKEditor用config.jsを用意する

独自のCKEditor用config.jsを用意すればＯＫです。
流れとしては、
１．独自config.jsを作成し、その中にtoolbar設定を書く。
２．CKEDITOR.replace()時に、１で作成したファイルをcustomConfig:　で呼ぶ
だけです。

では、まず独自config.jsを作りましょう。ファイル名はedit1config.js とします。

JAVASCRIPT:

//設定をするものであり、toolbarだけでなくいろんな設定をここで行える
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'CustomToolbar'; //CustomToolbarという名前にしてみた
config.toolbar_CustomToolbar =
[
['Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Undo','Redo','-','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','SpecialChar'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor']
];
};

で、 edit1テキストエリアに上記config設定をしたCKEditorを組み込みます。

HTML:

<textarea id="edit1"></textarea>

参考リンク

CKEditor API documentation
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

CKEditor Developers Guide
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

まるひろの独学-者（どくがくもん）の独り言の記事
http://ameblo.jp/dokugakumono/entry-10400796859.html

Mar 04

CKEditorを使ったフォームを作成する。

JavaScript, php No Comments »

CKEditorで入力フォームを作ります。

form.php で入力（CKEditor、CKFinder付き。前回参照）
conf.phpで確認。戻るでform.phpに戻るようにして、form.phpにはPOSTで入力していた情報をデータとしてセットする。

を行います。

form.phpで入力と戻ってきたときのデータをセット

form.phpでは、CKEditor(CKFinder含）をセットし、formタグで囲み、action="conf.php" method="post"にします。
conf.phpで戻ってきたときに入力していたデータをセットします。

１．は普通にCKEditorを組み込めれば、フォームと同じです。

２．では、textarea name="editor1" だったとすると、editor1にPOSTで戻ってきたデータをセットすることになりますが、CKEditorの準備が完了してからセットしないと反映されません。

イベントinstanceReadyを使い、準備が出来た時にセットするようにします。

JAVASCRIPT:

<script type="text/javascript"> //<![CDATA[ CKEDITOR.on(\\'instanceReady\\', function(e) { var tmpEditor = CKEDITOR.instances.editor1; tmpEditor.setData( \\'<?php echo ; ?>\\' ); });
//]]> </script><script type="text/javascript">
//<![CDATA[
CKEDITOR.on('instanceReady', function(e) {
var tmpEditor = CKEDITOR.instances.sentence;
tmpEditor.setData( '<?php echo $sentence; ?>' );
});
//]]>
</script>

渡すデータは、改行などをあらかじめ削除しておきます。

PHP:

$sentence = $_POST['editor1'];
$sentence = ereg_replace( "\r|\n", "", $sentence );

これで、CKEditorの準備が出来た時に、$_POST[''];のデータをセットすることが出来ます。

参考ＵＲＬ

CKEditor 3 JavaScriptAPI Documentation
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html

Mar 03

CKEditor,CKFinderを使ってWORDのようなフォームを作る

JavaScript, php 2 Comments »

CKEditor,CKFinderの使い方

WordPressなどでは、TinyMCEが使われていますが、画像などのアップロードをしようとすると、TinyMCEだけを組み込んでもできません。

そこで、TinyMCEに似ていて、なおかつファイルアップロードまで簡単に組み込めてしまえるCKEditor,CKFinderを使うことにします。

CKEditorがTinyMCE、CKFinderがファイルアップロード機能（実際は管理も出来ますが今回は省略）です。

Read more... »

Aug 22

メルマガ、HTMLメールを作成するソフトThunderbird

HTML No Comments »

Thunderbirdでメルマガ作成

メルマガを含め、HTML形式のメールを作成するには、Thunderbirdが良いです。
Outlook2007では、受信側で正しく表示できないなどの例が出ているし、HTMLだと思っていたらXML形式のようです。
ホームページ作成ソフトなどでHTMLタグ記載し、それをThunderbirdにコピペする方法が一番安全に送れます。画像は外部のサーバにアップしてあるデータを利用することで、メール容量を軽減することが出来ます。

Read more... »

Aug 08

css media print 印刷用にCSSを組む

HTML No Comments »

CSSを使って印刷設定を行う。

ブラウザ表示のを印刷用にCSSを用意するtipsについてメモ。
普段はあまり印刷を気にすることがなくても、「自分の意図したとおりに印刷してほしい」時などがページによってはあるかもしれません。
とりあえずメモ用に印刷に関するものを取り上げてみる。
※メモなので途中です。

Read more... »

Apr 08

TinyMCEを使ったビジュアルエディタJavascript WYSIWYG Editor

HTML No Comments »

TinyMCEを使ってWYSIWYGエディタ

HTMLのテキストエリアに追加して、簡単にWORDのようなエディタ化することが出来ます。タグを自分で書くことなく、WORDを使っているかのように簡単に出来てしまうというものです。

JavaScriptで作られていて、カスタマイズも比較的容易に出来るようになっています。勿論、日本語化も簡単です。

Read more... »

May 05

Ajax サーバとのやりとりメモ

JavaScript, php No Comments »

ajaxメモ。ユーザー名判定やいかに！？

今更ですが。Ajaxをメモっておかないと忘れてしまいそうで。

最近、登録時にユーザー名決めるときに「自分の好きなID]を入れて「重複チェック」ボタンを押したら即座に判定結果が出るのありますね。
あれをちろっと作ってみる。

今回も、とある女性に手伝ってもらい記事のイラストモデルに。
といってもgoogle検索で出てきた写真をトレースしているという。

さて、この女性は一体誰でしょう？・・・という記事ではないのでさっさと話を進めます。

Read more... »

Apr 15

google検索

HTML, Tips, wordpress No Comments »

Google検索にひっかかるためには、いろんな方法があると思います。

とりあえず、自分はまだ初心者なのですがメモも兼ねて。

サイトの登録をする

サイトの登録/削除　ページでサイトを登録しないことには始まりません。
これをやらないと、一生サイトが検索結果に反映されません（多分）
ちなみにYahoo!は有料だそうで、小山太郎.comも検索結果には反映されないという（泣）
まったく困ったもんです。はい。

ウェブマスターツールにも必要な情報を追加

Googleウェブマスターツール　ページでサイトを登録。
ウェブ作成者がやるものなのでしょうかね？「ウェブマスターツール」なんつって。
ここでは、より検索に反映されやすいよう、Googleがアドバイスしてくれます。
それに従って手順や情報を追加することで、より検索結果に出やすくなります。

ブログ形式は、デフォルトでping送信したり、サイトマップを作成してくれたりしますが、自前静的サイト（XHTML+CSS)サイトではなかなか検索結果に反映されにくい構造になっています。
せめて、sitemal.xmlを作るなどちょこっと工夫が必要だと認識しました。

ヘルプを見よう

Google ウェブマスター向けヘルプセンター　を読んで、より正確な検索結果を反映させましょう。
という小山太郎はまだ読んでませんが・・・（汗）

随時情報を追加していきたいと思います。

Apr 11

Adobe Airって？

Flash, HTML No Comments »

この前、Flex3について書くとか言っといてAdobe Airの事を書いてしまいます。

さて、Airって何さ？って話なんですが。
簡単に言うと、インストールして普通に使うアプリ（Photoshopとか）を作れるものです。
で、開発環境ではなく、実行環境です。
こんな説明じゃわかりづらいっすね。

イメージ的には、Photoshopとプラグインとの関係みたいな感じで。
PhotoshopがAdobe Air、プラグインが作ったアプリって感じで。（ますますわかりづらい！？）

要は、Adobe Airというものをインストールしていないと（実際はJavaも）、作ったアプリも動きませんよ～ってことです。Photoshopがないとプラグインだけあっても動かないってもんです。

で、Adobe Airの何がすごいって、FlashやHTMLやJavaScriptとAdobe Air技術を使って、HDDにあるファイルなんかにアクセスしていろいろ出来るわけですよ。

Internet ExplorerやFireFox,Safariでは、通常HDDにあるファイルにアクセスするのはアップロードするときくらいですね。それが、普通に使えてしまうのですよ。しかもたった数行書くだけで！！
C++とか使っていないとできなかったことが、FlashやHTMLやJavaScriptとAirのちょこっと使うだけでできてしまうという。

素晴らしい！！
しかもネットにももちろんつなげれるので、よりアップロードなどがしやすいものや、その他もろもろが出来るってわけです。

現在は日本語を扱うことはできませんが、６月くらいに対応するそうです。

Adoe Air

実は必要なJava環境。

開発するなら、Adobe Air SDK

とりあえずこの通りにやればアプリができます。
Adobe デベロッパーセンター　AIRチュートリアル　Dreamweaver 第１回　AIRアプリをはじめてみよう　～環境を設定する～

*.airファイルを作るのが目的。これはインストーラー（通常*.exeとか）で、インストールするとアプリを使えるようになるってわけです。