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
aufsでディレクトリを重ねてマウント@Ubuntu 14.04

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

no image
VARDIA RD-S601購入

このページへのアクセスが多いので、その後のレポートにリンクを張っておきます 東芝 …

no image
LXDEのスタートメニューのカスタマイズ@Ubuntu 14.04

menulibreというツールがあるので、これをリポジトリに追加してインストール …

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

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

no image
CentOS 7からWindowsにリモートデスクトップ接続で変換キーや無変換キーを使う

CentOS 7にデフォルトで同梱されているリモートデスクトップクライアント(f …

no image
タイムゾーンの変更方法@RHEL

RHELやCentoSインストール時にタイムゾーン間違ったり、VMwareでクイ …

no image
mysqldump でのバックアップで文字化けする

MySQLのバックアップのため、定期的にmysqldumpでバックアップしている …

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

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

no image
py2exeでpythonをWindowsの実行ファイル形式にする@Windows 7 64bit

python でちょこっと作プログラムを誰かに渡したいとき、相手にpython入 …

no image
デフォルトサーバ証明書の更新 @ CentOS 4

インストール時に自動的にインストールされるApacheのSSLの証明書を更新する …