ウェブサイト（ダウンロード）：
http://www.openwebware.com/
デモ：
http://www.openwebware.com/wysiwyg/demo.shtml
導入は簡単。
openWYSIWYGは、HTMLフォームのテキストエリア（<textarea>）をエディタとして表示し機能させる仕組みをJavascriptで表現しているプログラム。 なので、要領としてはスタイルシートでテキストエリアの見栄えを調整するのと同じ。
- 配布元よりzipファイルをダウンロード＆解凍
- 解凍したフォルダごとウェブサーバーへアップロード
- openWYSIWYGを導入するHTML文書内に、cssおよびjsファイルの場所と、必要なスクリプトを指定（記述）
- <textarea>にidを割り当てる
以上で完了。
詳細は、、、
openWYSIWYGから配布されているzipファイルをダウンロード、解凍後のフォルダ内はこんな感じ。
ウェブサーバーへアップロード後、”example.html”へブラウザからアクセスするだけで3種類のエディタが動作する状態になっているので、エディターとして使うだけならこのファイルを編集してテキストエリアのサイズを変えたり不要な部分を削除するなどしてそのまま利用が可能。
（上から、”Default”、”Full（ツールバーカスタマイズや画像アップロードなど）”、”Small”の３タイプ）
エディタ用のページを新しく作成する場合は、以下のコードをhtmlファイル内に記述。
<head>～</head>の中に
<script language="JavaScript" src="scripts/wysiwyg.js" type="text/javascript"></script>
※ ”Full”や”Small”タイプで利用する場合は下記も追加
<script language="JavaScript" src="scripts/wysiwyg-settings.js" type="text/javascript"></script>
※ 赤い文字の”scripts”の部分はhtmlファイルからみた適正なパスに読み替えてください
さらに、
さらに、
<script language="javascript1.2"> WYSIWYG.attach('textarea1'); </script>
※ ”Full”や”Small”で利用する場合は上記ではなく下記のように記述
<script language="javascript1.2"> WYSIWYG.attach('textarea1', full); </script>
または、、
<script language="javascript1.2"> WYSIWYG.attach('textarea1', small); </script>
そして、<body><form>内の <textarea> に id="textarea1" を割り当てれば完了。
例として、、
例として、、
<textarea id="textarea1" name="any" style="width:800px; height:600px;">
サンプル
<html>
<head>
<title>HTMLエディタ</title>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg-settings.js"></script>
<script language="javascript1.2">
WYSIWYG.attach('textarea1');
</script>
</head>
<body>
<div align="center">
<br />
<h1>My Editor</h1>
<textarea id="textarea1" name="any" style="width:800px;height:600px;"></textarea>
<br />
</div>
</body>
</html>
<head>
<title>HTMLエディタ</title>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg-settings.js"></script>
<script language="javascript1.2">
WYSIWYG.attach('textarea1');
</script>
</head>
<body>
<div align="center">
<br />
<h1>My Editor</h1>
<textarea id="textarea1" name="any" style="width:800px;height:600px;"></textarea>
<br />
</div>
</body>
</html>
カスタマイズやその他の機能については、解凍したフォルダ内の docs/doc.html を参照。
ひとまずお試しで今日はここまで。
あ、Chromeでの表示は非対応なのでアクセスしても動きません。
Chromeからアクセスしてエディタを使用するためには少しだけjsファイルを編集する必要が…。
次回に書きます。
0 件のコメント:
コメントを投稿