FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CKEditor 使い方

ついこの間、CLEditorを紹介しましたが、色々いじってみたらIEだと改行がpタグになって、Firefoxだとbrになる挙動を確認しました。
あと、個人的にリンクを表示する場合にtarget属性を指定したかったので色々いじり倒してみましたが、もうちょっと便利そうなものをみつけました。

それが、CKEditor です。

使うとこんな感じになります。

>>Web上で使うhtmlエディタ

 

いつか、こういうwebツールを作ろうと思っていた矢先にCKEditorを見つけたのでそのままつかっちゃいました。。

 

決して手抜きではありませんw

後でもうちょっと便利に工夫するつもりではありますが。。。

 

で、このCKEditorを自分のサイト上で使うやり方をメモしておきます。

まずは、本家のサイトから本体をダウンロードします。

解凍して、中をみてみるとファイルがたくさんあってちょっとげんなりします。

とりあえず具合を見たい場合は、_samples/index.html を開いてブラウザで動作確認をしてみてください。


動作確認をしたらいよいよ使ってみましょう!

 

【STEP1】インストール

まずは、必要なものだけを自分のサイトのjsディレクトリへ移動します。

っで必要なものは

 ckeditor.js

/adapters/

/images/

/lang/

/plugins/

/skins/

/themes/

ってとこですね。ひとまず上記を全部移動します。

【STEP2】設定ファイルの設置

ckeditor.jsと同じ階層にconfigs.jsが無い場合は作って置いてください。

基本的にはこの中で動作モードを設定します。

※動作モードに関しては別途説明します。

 

【STEP3】テキストエリアの表示

あとはいたって簡単です。htmlファイルでckeditor.jsを読み込んだ後に

<textarea class="ckeditor" id="editor1" name="editor1"></textarea>

と記述すれば、OKです。

ちなみにテキストエリアのidはユニークにしていれば複数設置も可能です。

もし、テキストエリアに初期値を入れたい場合は

htmlタグをそのまま書いてください。

※<を&lt;とかに変換しなくて大丈夫です。

 

 

ツールバーの設定等は「CKEditor設定編」へ続く。

 

もしブログで書くhtmlを楽に書きたいだけであれば是非

>>Web上で使うhtmlエディタ

を使ってくださいませ。

スポンサーサイト

コメントの投稿

非公開コメント

質問です

ご教示をお願いいたします。
「configs.jsが無い場合」の作り方はどうするのですか?
それと、次に、「htmlファイルでconfigs.jsを読み込んで、<textarea class="ckeditor" id="editor1" name="editor1"></textarea>を記述」というところですが、ここのところの手順をもうすこし具体的・詳細にご教示して下されば助かります。何分とも、パソコン初心者ですのでよろしくお願いいたします。

Re: 質問です

configs.jsがない場合は、空っぽのファイルをつくっておいておけばいいです。
メモ帳などのテキストエディタで名前を付けて保存で名前を「configs.js」にして保存してください。

htmlファイルでconfigs.jsを読み込んで、… ここは configs.js ではなくて ckeditor.js の間違いです。スイマセン。。。
<head>~</head>の間に
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
と書いておけばOKです。
※srcの中はご自身で設置したURLに変えてくださいね。


> ご教示をお願いいたします。
> 「configs.jsが無い場合」の作り方はどうするのですか?
> それと、次に、「htmlファイルでconfigs.jsを読み込んで、<textarea class="ckeditor" id="editor1" name="editor1"></textarea>を記述」というところですが、ここのところの手順をもうすこし具体的・詳細にご教示して下されば助かります。何分とも、パソコン初心者ですのでよろしくお願いいたします。

承認待ちコメント

このコメントは管理者の承認待ちです
プロフィール

pg103

Author:pg103
とりあえず、いろいろ作ってみようと思っているプログラマーです。

【僕がお気に入りの本】

CakePHP 1.3によるWebアプリケーション開発―オープンソース徹底活用

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

MySQL全機能バイブル ~現場で役立つAtoZ~

プロのための Linuxシステム構築・運用技術 (Software Design plus)

最新記事
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。