投稿者: Kaz.A

お客さまのホームページをリニューアルする際に、『お知らせ』部分をWYSIWYGエディタで書き込めるようにしました。
その時に使ったのが『openWYSIWYG』というWYSIWYGエディタ。
JavaScriptで開発されているエディタです。
この使い方とカスタマイズ、画像使用不可ですがChromeで使う際の修正を書いて行きます。

まずは、基本プログラムのダウンロード。
openWYSIWYG　（ライセンス：LGPL）

Home

非公式で日本向けカスタム版もあるようですが、使用前にご確認ください。

設置は簡単。ヘッダー内で「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) {

を新しく追加すると”エラーは出なくなります”

Tweet