このサイトで使用している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。エディタとしての機能は充実していて、使いやすそうだがちょっと動作が重たい気がします。
Tags: IT技術, プログラミング by mazn
No Comments »