SPAW もう一言だけ
先日の SPAW に関するエントリ を投稿してから、ずっと SPAW にはまりまくっている。
スタイルシートを作って、エディタの中でもスタイルが変わるかどうか試してみた。さらに、Internal Link のダイアログ作成もやってしまった(データベースから引っ張ってくるのはやってないけど)。本当に面白いおもちゃを見つけてしまった気分だ。
Internal Link のダイアログは非常に便利だ。例えば Blog ツールに組み込んでしまえば、過去の記事へのリンクが簡単に作れてしまう。CMS に組み込んでしまうのも良いだろう(先ほど試して知ったのだが、Kupu にもそういう機能はあるようだ。Kupu は今週末遊んでみたいと思っている)。
ただ、残念なのはライセンスが GPL であること。もちろん、GPL を否定しているわけではないのだが。
追記(2004年8月14日): SPAW 実験ページ にも、今回の修正を組み込んでいますので、自由にお試しください(但し、Microsoft Internet Explorer 5.5 以上のみで動作します)。
追記(2005年5月28日): SPAW 実験ページ というのをやっていましたが、一時停止させて頂きます。
SPAW を PHP スクリプトに組み込む
SPAW は簡単に組み込むことが可能だ。<form> の中で以下のように呼び出すだけである。(include 文のところは適当に変えるなりなんなりしてくれ。)
<?php
include './spaw/spaw_control.class.php';
$sw = new SPAW_Wysiwyg(
'test', // control's name
stripslashes($HTTP_POST_VARS['test']), // 表示するHTML
'ja-euc',
'intlink', // toolbar mode
'default', // theme (skin)
'100%',
'300px',
'spaw_test.css',
'' // drop down menu
);
$sw->show();
?>
コンストラクタの定義は以下のようになっていた。(ソースより抜き出し)
function SPAW_Wysiwyg($control_name='richeditor', $value='', $lang='', $mode = '',
$theme='', $width='100%', $height='300px', $css_stylesheet='', $dropdown_data='')
- $control_name
- コントロール名
- $value
- エディタに表示する HTML
- $lang
- メッセージなどの言語を指定する。spaw/lib/lang/ にメッセージファイルが置かれている。
- $mode
- ツールバーのモードを指定する。spaw/lib/toolbars/ にツールバーの定義ファイルがある。
- $theme
- テーマを指定する。インストール後直ぐにつかえるものは 'classic', 'default' の2種類。spaw/lib/themes/ に定義ファイルがある。
- $width, $height
- エディタの幅、高さを指定する。
- $css_stylesheet
- スタイルシート。この変数に指定したファイル(URLで指定すること)で、エディタの中のHTMLをどのように表示するか定義できる。
- $dropdown_data
- ドロップダウン(プルダウン)のメニュー項目を指定する。例えば、段落なら $array['paragraph']、スタイルなら $array['style'] に設定した後、$dropdown_data 変数に $array 変数を渡す。デフォルトの動作をエディタによって変更したい場合には有効だ。
スタイル変更の実験
まず、以下の CSS を準備した。
.warm { color: #F00; background: #FC6; }
.cool { color: #CCF; background: #009; }
次に、スタイル変更用のプルダウンを表示させるように設定する。spaw/lib/toolbars/intlink/intlink_toolbar_data.inc.php ファイル(これは、どのツールバーを表示させるかによって異なる。私が実験ページで表示しているツールバーがこれなのだ)に以下の部分があることを確認。無ければ追加する。
array(
'name' => 'style',
'type' => SPAW_TBI_DROPDOWN
),
spaw/config/spaw_control.config.php ファイルの、$spaw_dropdown_data['style']['default'] に関する部分を、以下の設定に置き換える。
// default dropdown content $spaw_dropdown_data['style']['default'] = '標準'; $spaw_dropdown_data['style']['cool'] = '涼しげ'; $spaw_dropdown_data['style']['warm'] = 'あったかそう';
ついでに、テーブル(<table>)や、テーブルのセル(<td>)に関する設定($spaw_dropdown_data['table_style'], $spaw_dropdown_data['td_style'])も同じように設定する。
うまく動いているようだ。
Internal Link のダイアログ
spaw/config/spaw_control.config.php ファイルの、$spaw_internal_link_script 変数にダイアログの URL を指定する。これは HTML でも PHP でも Perl でも何でも良い。私は PHPで作成した。(ちょっと長すぎたかな?)
<?php
include './spaw/config/spaw_control.config.php';
include $spaw_root.'class/lang.class.php';
$theme = empty($HTTP_GET_VARS['theme'])?$spaw_default_theme:$HTTP_GET_VARS['theme'];
$theme_path = $spaw_dir.'lib/themes/'.$theme.'/';
$l = new SPAW_Lang($HTTP_GET_VARS['lang']);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>サイト内リンク</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $l->getCharset()?>">
<link rel="stylesheet" type="text/css" href="<?php echo $theme_path.'css/'?>dialog.css">
<script language="javascript" src="utils.js"></script>
<script language="javascript">
<!--
var targets = new Array();
targets[0] = new Array();
targets[0]['flame'] = '_self';
targets[0]['text'] = '同じフレーム';
targets[1] = new Array();
targets[1]['flame'] = '_blank';
targets[1]['text'] = '新規ウィンドウ';
targets[2] = new Array();
targets[2]['flame'] = '_top';
targets[2]['text'] = 'トップのフレーム';
targets[3] = new Array();
targets[3]['flame'] = '_parent';
targets[3]['text'] = '親のフレーム';
var links = new Array();
// ここの部分は、データベースから引っ張ってきたドキュメントのURL,
// タイトルに置き換えるように、PHP で組めばよい。
links[0] = new Array();
links[0]['title'] = 'Satoshi\'s Blog';
links[0]['url'] = 'http://www.randynetwork.com/blog/';
links[1] = new Array();
links[1]['title'] = 'RandyNetwork.com';
links[1]['url'] = 'http://www.randynetwork.com/';
links[2] = new Array();
links[2]['title'] = 'Yahoo!';
links[2]['url'] = 'http://www.yahoo.co.jp/';
function Init()
{
var pulldown = document.forms['a_prop'].urls;
for (i = 0; i < links.length; i++) {
pulldown.options[i] = new Option(links[i]['title'], i);
}
pulldown = document.forms['a_prop'].target;
for (i = 0; i < targets.length; i++) {
pulldown.options[i] = new Option(targets[i]['text'], i);
}
return true;
}
function okClick() {
var aProps = {};
var myForm = document.forms['a_prop'];
var selected = myForm.urls.selectedIndex;
aProps.href = links[selected]['url'];
aProps.name = '';
aProps.target = targets[myForm.target.selectedIndex]['flame'];
aProps.title = links[selected]['title'];
if (myForm.text.value.length) {
aProps.description = myForm.text.value;
} else {
aProps.description = links[selected]['title'];
}
window.returnValue = aProps;
window.close();
}
function cancelClick() {
window.close();
}
//-->
</script>
</head>
<body onLoad="Init()">
<form name="a_prop">
<p>リンク先: <select name="urls"></select></p>
<p>ターゲット: <select name="target"></select></p>
<p>置き換えテキスト: <input name="text" size="30"><br>
(未入力の場合はリンク先のタイトルを使用します)
</p>
<hr>
<input type="button" value=" OK " onClick="okClick()" class="bt">
<input type="button" value="キャンセル" onClick="cancelClick()" class="bt">
</form>
</body>
</html>
