お客さまのホームページをリニューアルする際に、『お知らせ』部分をWYSIWYGエディタで書き込めるようにしました。
その時に使ったのが『openWYSIWYG』というWYSIWYGエディタ。
JavaScriptで開発されているエディタです。
この使い方とカスタマイズ、画像使用不可ですがChromeで使う際の修正を書いて行きます。
まずは、基本プログラムのダウンロード。
openWYSIWYG （ライセンス：LGPL）
非公式で日本向けカスタム版もあるようですが、使用前にご確認ください。
設置は簡単。ヘッダー内で「wysiwyg.js」と「wysiwyg-settings.js」を読み込み
使用するIDの定義はWYSIWYG.attachとして (‘要素ID’,’ツールバー設定’) で完了。
<script type=”text/javascript” src=”scripts/wysiwyg.js”></script>
<script type=”text/javascript” src=”scripts/wysiwyg-settings.js”></script>
<script type=”text/javascript”> WYSIWYG.attach(“txw1”, full);</script>
ツールバーの設定は『wysiwyg-settings.js』に書き込みます。
基本的な設定として
要素の幅 ［セット名］.Width = “100%”;
要素の高さ ［セット名］.Height = “250px”;
要素内の基本スタイル ［セット名］.DefaultStyle = “font-family: sans-serif; font-size: 14px;”
ツールバーのカスタマイズ。
デフォルトのツールバーは上から[0]、[1]の2段になっています。
それぞれの段に入るツールは『wysiwyg.js』内に『this.Toolbar = new Array();』として書いてあります。
区切り線も入れられるようで、”seperator”と入れれば縦線が入ります。
そして、これを踏まえて「wysiwyg-settings.js」に書き込めば専用のツールセットが出来上がります。
書き方は
［セット名］.full.Toolbar[［段数］] = new Array([ここに””と”,”区切りでツール名を書く]
たとえば、fullと言うセット名の場合
full.Toolbar[0] = new Array(“font”,”fantasize”,”headings”, … );
デフォルトのツールバーに対して、任意の段・任意の並びに表示したい場合
［セット名］.addToolbarElement(“［ツール名］”, ［段］, ［並び（右から何番目）］);
たとえば、fullと言うセット名で3段目の一番右に『フォントサイズ』を置く場合
full.addToolbarElement(“fontsize”, 3, 1);
とすればOKです。
さて、このエディタ、1つ大きな欠点があります。
Chromeに非対応です。
画像の挿入など画像に関わる部分を使用しないのであれば
2020行目付近にある
if ((navigator.userAgent.indexOf(‘Safari’) != -1 ) || !document.getElementById || !document.designMode){
をコメントアウトして
if (!document.getElementById || !document.designMode) {
を新しく追加すると”エラーは出なくなります”
