Mazn.net

やってみて 調べてみて 苦労しなけりゃ 箱は動かじ

ブラウザ上でのWYSIWYG HTMLエディター

   

このサイトで使用しているWordPressでも記事作成するときに使用しているようなWYSIWYGのHTMLエディターを自分のWebアプリに組み込もうとしてみた。

まずどのようなHTMLがあるか調べてみたところ、以下の物を発見。

一番上のfckeditorをまずは使ってみたので、メモ。
※事前にApacheやIISといったWebサーバを用意しておいてください

fckeditorのzipファイルをダウンロードし、zipファイル を展開。展開してできたディレクトリを”fckeditor”というディレクトリ名でWebサーバに配置。
次にエディタを表示させるhtmlファイル(index.html)を以下のように記述。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
      window.onload = function()
      {
        var oFCKeditor = new FCKeditor( 'mytext' ) ;
        oFCKeditor.BasePath = "fckeditor/" ;
        oFCKeditor.ReplaceTextarea() ;
      }
</script>
<title>fckeditor</title>
</head>
<body>
fckeditor
<br>
<textarea id="mytext" rows="50" cols="40"></textarea>
</body>
</html>

ここで、

var oFCKeditor = new FCKeditor( 'mytext' ) ;

の’mytext’ と

<textarea id="mytext" rows="50" cols="40"></textarea>

の”mytext”を合わせることで、テキストエリアをHTMLエディタに切り替えることができます。

fckeditorとhtmlファイルの配置は以下の通り。

/ - index.html
  - fckeditor/ - fckconfig.js
               - fckeditor.js
               -  ・・・・・ いろいろなファイルやディレクトリ

あとはWebブラウザでこのhtmlファイルにアクセスすればOK。エディタとしての機能は充実していて、使いやすそうだがちょっと動作が重たい気がします。

 - IT技術, プログラミング

336px

Message

メールアドレスが公開されることはありません。

  関連記事

no image
LDAPサーバ構築 @ Debian etch

まずはapt-getでインストールします # apt-get install s …

no image
Firefox 3.6.x のメモリ消費が激しすぎる

Firefox を長時間使っていると、メモリ消費が700MBを超えています。 タ …

no image
KVMのコンソールに接続する@RHEL6 on Fedora14 KVM

KVM上で仮想OSを動かしている場合、コンソールに接続するには、少し設定を変更す …

no image
WordPress と Twitter の連携

tweetable でWordpressとTwitterを連携させてみました。 …

no image
ddコマンドと圧縮・展開@CentOS 5

dd コマンドの便利な使い方のあれこれです。 通常ddコマンドは、if, ofの …

no image
DockerHubのイメージのタグ一覧をコマンドで取得する

docker コマンドでタグを指定せずにコンテナイメージをpullすると、lat …

no image
Tracにガントチャートプラグイン導入@Debian Etch

Tracの導入の記事で導入したTracにガントチャートプラグインを導入してみまし …

no image
keyhac でキーカスタマイズ@Windows XP, Vista

トラックポイントつきのIBMのキーボードを手に入れたので、パソコンの操作をキーボ …

no image
VMware Player 3.0 でのネットワーク設定

VMware Player 3.0 にはネットワーク設定の画面がついていないので …

no image
ネットワーク遅延のシミュレーション@CentOS 5

最近のLinux では、簡単にネットワーク遅延をシミュレーションできるようです。 …