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
Windows 10のスタートメニュー整理

Windows 7では、スタートメニューのフォルダを右クリックしてフォルダを開く …

no image
bash使用時にCtrl-dでログアウトさせない

bashではCtrl-○でいろいろな機能が使用できますが、たまに間違って押してし …

no image
Windowsが勝手に再起動するのを防止@Windows Vista

Windows Vistaで、Windowsを更新して、ほったらかしていると勝手 …

no image
Windows Media Player 12でファイルサーバ上のファイルをDLNAで共有する@Windows7

※Flashやmp4などもトランスコードで再生するため、PS3 Media Se …

no image
KVM on KVM @ Fedora 17

最近のLinuxカーネルは、KVMのネスト (KVMのゲストOS上でKVMを動か …

no image
aufsでディレクトリを重ねてマウント@Ubuntu 14.04

aufsをUbuntu 14.04上で使ってみました。 aufsは、複数のディレ …

no image
mod_rewriteを使って、特定のファイルをSSLアクセスにする@Apache with RHEL5

TracやWikiなどのWebアプリケーションを使ってて、普段は通常のhttpア …

no image
firefox アドオン セカンドサーチが動作しない@Firefox 3

いつ頃からかFirefoxのアドオン、セカンドサーチが機能しなくなってしまいまし …

no image
Windowsのブートローダ(NTLDR)の設定を変更する@Windows XP

Windows XP をメインで使っていたPCにLinuxをサブで入れた場合のデ …

no image
コマンドラインからWebページを画像として保存@CygwinやLinux

スクリプトでWebページを保存するにはwgetを使えば簡単に実現できますが、これ …