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
Googleの検索結果に近所の情報が表示される件

いつ頃からか、Googleで普通に検索すると、近所の情報が表示されるようになりま …

no image
bashで配列のエクスポートができない@bash 3.2

bashにおいて、サブシェル(呼び出し先の別のシェル)内で呼び出し元の変数を参照 …

no image
grubの起動画面で日本語キーボート配列を使う

grub 起動時に起動オプションを変更する場合、日本語キーボード配列ではなくスト …

no image
coreファイルの扱いについて

coreを吐かせるにはulimitで制限されていない必要がある # ulimit …

no image
printfコマンドで数字を整形表示@Linux

echoコマンドはシステムによって挙動が異なる、特に改行関連を扱うオプションに差 …

no image
Firefox7のプチフリ対策

Firefox 7 にしてから、Firefoxが定期的にフリーズしてしまいます。 …

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

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

no image
使用中のファイルの追跡@WindowsXP

Windows上であるファイルを削除しようとすると、使用中で削除出来ないときがあ …

no image
リモートデスクトップのWindows10のシャットダウン

デスクトップ画面でAlt + F4 を押すと、シャットダウンメニューが出てきます …

no image
Acer AS1410 の無線LAN 11n設定

Acer AS1410購入しました。ついにで無線LANが11nに対応しているので …