目次
htmlArea というのは、ブラウザ上で動く WYSIWYG な HTML エディタです。htmlArea を使うと、視覚効果をふんだんにつかった文章が簡単に作れます。この htmlArea で作った html ソースを、必要なところにコピー&ペーストする形で利用します。
すでに htmlArea 3.0 beta が出ていますが、今回は htmlArea 2.03 について、書いてみます*1。2.03 は IE コンポーネントを使っているため、IE 5.5 以降でないと、利用できません。3.0 は IE 以外でも使えるようになっているようです。3.0 に関しては、Going My Way の「自分のサーバーで動かすHTMLエディター」が参考になります。
*1 とか言いつつ、結局、3.0 についても書いてしまいました (^^;
フォントの種類、大きさを自由に変えることができるのはもちろん、色を変えたり、強調してみたり、絵(イメージ)を挿入したり。ただ、生成される html タグの要素名が大文字なので*2、XHTML ベースの html ファイルへの貼り付けにはそのまま使えません(まぁ、貼り付けてしまっても、たいていのブラウザでは問題なく閲覧できてしまうのですが。それがいいことなのか、悪いことなのかは別にして)。
*2 3.0 が気になるので、実際にダウンロードして試してみました。
IE コンポーネントを使うのをやめて、代わりに JavaScript でがしがし書いているんですね(spell check 機能は、例外的に perl で書いてありますが)。
生成される html タグはちゃんと小文字になっているので、XHTML なファイルにも安心して張り付けることができます。
カスタマイズして、自分の好きな機能、ボタンを付けることもできるようになっていますが、付けたい機能によっては、うまく動くようになるまで、結構てこずります。
カスタマイズの仕方の例として、「引用」ボタンを付ける方法を紹介します。
結構、<blockquote> は多用する方なので(必ずしも他人の文章を「引用」する目的ではなくて、自分の書いたプログラムのソースコードの一部を見せるのに使ったりします)、「引用」ボタンは欲しいところ。そういう訳で、editor.js を改造してみました。
とりあえず、ボタンを作ってみました。こんな感じ →
次に htmlArea のソースを改造。*3
どこをどういじったか、context diff を以下に示します。
*3 ついでに“undo”ボタンも付けてみましたが、いまいち効きが悪いですね。数回押してやっとundoがはたらくという感じ。
ちなみに、undo のボタンの画像は最初から、htmlArea に添付されています。
*** editor.js.orig Tue Mar 25 14:03:44 2003
--- editor.js Tue Feb 10 13:24:53 2004
***************
*** 47,53 ****
['justifyleft','justifycenter','justifyright','separator'],
['OrderedList','UnOrderedList','Outdent','Indent','separator'],
['forecolor','backcolor','separator'],
! ['HorizontalRule','Createlink','InsertImage','InsertTable','htmlmode','separator'],
// ['custom1','custom2','custom3','separator'],
['popupeditor','about']];
--- 47,53 ----
['justifyleft','justifycenter','justifyright','separator'],
['OrderedList','UnOrderedList','Outdent','Indent','separator'],
['forecolor','backcolor','separator'],
! ['HorizontalRule','Createlink','InsertImage','InsertTable','blockquote','undo','htmlmode','separator'],
// ['custom1','custom2','custom3','separator'],
['popupeditor','about']];
***************
*** 105,110 ****
--- 105,112 ----
"about": ['about', 'About this editor', 'editor_about(\''+objname+'\')', 'ed_about.gif'],
// Add custom buttons here:
+ "blockquote": ['blockquote', 'Blockquote', 'editor_action(this.id)', 'ed_blockquote.gif'],
+ "undo": ['undo', 'Undo', 'editor_action(this.id)', 'ed_undo.gif'],
"custom1": ['custom1', 'Purpose of button 1', 'editor_action(this.id)', 'ed_custom.gif'],
"custom2": ['custom2', 'Purpose of button 2', 'editor_action(this.id)', 'ed_custom.gif'],
"custom3": ['custom3', 'Purpose of button 3', 'editor_action(this.id)', 'ed_custom.gif'],
***************
*** 387,392 ****
--- 389,400 ----
"resizable: yes; help: no; status: no; scroll: no; ");
}
+ else
+ if (cmdID.toLowerCase() == 'blockquote'){
+ // editdoc.execCommand('Paste');
+ editor_insertHTML(objname,"<blockquote>","</blockquote>");
+ }
+
// all other commands microsoft Command Identifiers
else { editdoc.execCommand(cmdID); }
}
***************
*** 553,559 ****
}
// update button states
! var IDList = Array('Bold','Italic','Underline','StrikeThrough','SubScript','SuperScript','JustifyLeft','JustifyCenter','JustifyRight','InsertOrderedList','InsertUnorderedList');
for (i=0; i<IDList.length; i++) {
var btnObj = document.all["_" +objname+ "_" +IDList[i]];
if (btnObj == null) { continue; }
--- 561,567 ----
}
// update button states
! var IDList = Array('Bold','Italic','Underline','StrikeThrough','SubScript','SuperScript','JustifyLeft','JustifyCenter','JustifyRight','InsertOrderedList','InsertUnorderedList','Blockquote','Undo');
for (i=0; i<IDList.length; i++) {
var btnObj = document.all["_" +objname+ "_" +IDList[i]];
if (btnObj == null) { continue; }
実際にできあがった画面は、下のような感じになりました。
「はてなキーワードリンク」とか「(^^; を挿入」とかも付いていますが、 これは htmlArea の改造で実現しているのではなく、htmlArea を利用する側の html ファイルに埋め込んであります。「はてなキーワードリンク」のボタンは、拙作の「はてなキーワードリンク自動生成フォーム」の応用例です。
「htmlArea を利用する側の html ファイル」の例を、以下に示します。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Script-type" content="type/javascript">
<title>htmlArea</title>
<script type="text/javascript" language="Javascript1.2"><!-- // load htmlarea
_editor_url = "/htmlArea/"; // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' type="text/javascript" language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt type="text/javascript">function editor_generate() { return false; }</scr'+'ipt>'); }
// --></script>
</head>
<body>
<form name="htmlAreaInput" method="GET" action="http://www.na.rim.or.jp/~tsupo/keyword.cgi">
<script type="text/javascript" language="JavaScript1.2" defer>
editor_generate('inputText');
</script>
<textarea cols="60" rows="10" name="inputText">
テキストを入力してください。
</textarea><br>
<input type="submit" name="g" value="はてなキーワードリンク">
<a href="javascript:editor_insertHTML('inputText','(^^;');"><strong>(^^;</strong> を挿入</a>
</form>
</body>
</html>
おまけとして、htmlArea 3.0 に「引用」ボタンを付ける方法を書いておきます。
ボタンの画像は、htmlArea 2.03 に付けた「引用」ボタンをそのまま流用します。
htmlarea.js に以下のパッチ(context diff 形式) を当てれば OK です。
*** htmlarea.js.orig Tue Aug 12 00:30:12 2003
--- htmlarea.js Tue Feb 10 16:34:31 2004
***************
*** 71,76 ****
--- 71,77 ----
"formatblock", "space",
"bold", "italic", "underline", "separator",
"strikethrough", "subscript", "superscript", "separator",
+ "blockquote",
"copy", "cut", "paste", "space", "undo", "redo" ],
[ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
***************
*** 172,178 ****
redo: [ "Redoes your last action", "images/ed_redo.gif", false, function(e) {e.execCommand("redo");} ],
cut: [ "Cut selection", "images/ed_cut.gif", false, cut_copy_paste ],
copy: [ "Copy selection", "images/ed_copy.gif", false, cut_copy_paste ],
! paste: [ "Paste from clipboard", "images/ed_paste.gif", false, cut_copy_paste ]
};
/* ADDING CUSTOM BUTTONS
* ---------------------
--- 173,180 ----
redo: [ "Redoes your last action", "images/ed_redo.gif", false, function(e) {e.execCommand("redo");} ],
cut: [ "Cut selection", "images/ed_cut.gif", false, cut_copy_paste ],
copy: [ "Copy selection", "images/ed_copy.gif", false, cut_copy_paste ],
! paste: [ "Paste from clipboard", "images/ed_paste.gif", false, cut_copy_paste ],
! blockquote: [ "Insert Blockquote", "images/ed_blockquote.gif", false, function(e) {editor.surroundHTML('<blockquote>', '</blockquote>');} ]
};
/* ADDING CUSTOM BUTTONS
* ---------------------
***************
*** 1252,1257 ****
--- 1254,1263 ----
case 'r': cmd = "justifyright"; break;
case 'j': cmd = "justifyfull"; break;
+ case 'q': cmd = "formatblock";
+ editor.surroundHTML('<blockquote>', '</blockquote>');
+ break;
+
// headings
case '1':
case '2':
***************
*** 1459,1470 ****
HTMLArea.isBlockElement = function(el) {
var blockTags = " body form textarea fieldset ul ol dl li div " +
"p h1 h2 h3 h4 h5 h6 quote pre table thead " +
! "tbody tfoot tr td iframe address ";
return (blockTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
};
HTMLArea.needsClosingTag = function(el) {
! var closingTags = " script style div span tr td tbody table em strong font a ";
return (closingTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
};
--- 1465,1476 ----
HTMLArea.isBlockElement = function(el) {
var blockTags = " body form textarea fieldset ul ol dl li div " +
"p h1 h2 h3 h4 h5 h6 quote pre table thead " +
! "tbody tfoot tr td iframe address blockquote ";
return (blockTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
};
HTMLArea.needsClosingTag = function(el) {
! var closingTags = " script style div span tr td tbody table em strong font a blockquote ";
return (closingTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
};
上記パッチは、単に「引用」ボタンを付けるだけではなくて、ctrl+q で選択範囲を <blockquote> 〜 </blockquote> で囲む機能を追加するようになっています。
それにしても、何で「引用」ボタン、最初から付いてないんでしょうね? 結構、需要はあると思うんですけど。
Windows 版 の Opera 7.23 では、htmlArea 3.0 はうまく動きませんでした。残念。
ということで、手元にあるブラウザで動作確認できたのは、Internet Explorer 6.0SP1 だけです。Firebird (改め、Firefox) では動いているとの報告がありますので、IE 以外にも対応しているのは確かなのですが……。
Access Count: