エディタに機能ボタン追加 (FireFox対応)

« Nucleus v3.22jpにアップグレード :: NP_TrackBack v2.01jp2 c3 »

エディタに機能ボタン追加 (FireFox対応)

投稿者：hsur 投稿日時：2006-02-12 - 22:45
カテゴリー：Nucleus Tips - javascript / firefox - トラックバック（3）- Views: 291

Nucleusのエディタにボタンを追加する方法については、これまでにまみおさんや、ネケトさんが紹介されている（参考を参照）のですが、紹介されているとおりに改造した場合Firefoxではうまく動作しません。

最近、僕のブラウザはすっかりFirefoxがデフォルトになっているのでこのjavascriptをFirefox対応に書き直してみたいと思います。Javascriptはちょっと苦手なんですががんばってみます。

† 今回のミッション

Nucleusのエディタに以下の２つのボタンを追加する
・「特殊文字変換（<、>、&を<、>、&、"を"、'を'に変換）」するボタン
・選択範囲を<blockquote>で囲むボタン

ソースをみたところ、mozilla系のブラウザ(含Firefox)でtextareaの内容を書き換えたり、選択した部分のテキストを取得したりするにはmozHogehoge()^*1を使わなければいけないようなので、スクリプトをこれらを使うように書き換えてみました。

編集が必要なファイルは以下の３つ

nucleus/javascript/edit.js
nucleus/libs/PAGEFACTORY.php
nucleus/language/japanese-utf8.php（UTF-8の場合）

完成するとこんな感じになります

編集画面 - エディタに機能ボタン追加 (FireFox対応)

† 改造のポイント

１．nucleus/javascript/edit.js (110行目付近)

function italicThis() { insertAroundCaret('<i>','</i>'); }

このような部分があるので下記のようになるように書き換える

function italicThis() { insertAroundCaret('<i>','</i>'); }
// cles::blog core hack
function blockquoteThis() { insertAroundCaret('<blockquote>','</blockquote>'); }
function entitiesThis() { entitiesCaret(); }
// cles::blog core hack

２．nucleus/javascript/edit.js (292行目付近)

/* some methods to get things working in Mozilla as well */

このような部分があるので下記のようになるように書き換える

// cles::blog　core hack
function entitiesCaret () {
	var textEl = lastSelected;
	
	if (textEl && textEl.createTextRange && lastCaretPos) {
		var caretPos = lastCaretPos;
		caretPos.text = caretPos.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#039;');
	} else if (!document.all && document.getElementById) {
		newText = mozSelectedText().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#039;');
		mozReplace(document.getElementById('input' + nonie_FormType), newText);
	}
	updAllPreviews();
}
// cles::blog　core hack

/* some methods to get things working in Mozilla as well */

３．nucleus/libs/PAGEFACTORY.php(302行目付近)

					$this->_jsbutton('paste','pasteThis()',_ADD_PASTE_TT . " (Ctrl + V)");

このような部分があるので下記のようになるように書き換える

					$this->_jsbutton('paste','pasteThis()',_ADD_PASTE_TT . " (Ctrl + V)");
// cles::blog core hack
					$this->_jsbutton('blockquote',"blockquoteThis()",_ADD_BLOCKQUOTE_TT);
					$this->_jsbutton('entities',"entitiesThis()",_ADD_ENTITIES_TT);
// cles::blog core hack

４．nucleus/libs/PAGEFACTORY.php(339行目付近)

					$this->_jsbutton('link',"ahrefThis()",'');

このような部分があるので下記のようになるように書き換える

					$this->_jsbutton('link',"ahrefThis()",'');
// cles::blog core hack
					$this->_jsbutton('blockquote',"blockquoteThis()",_ADD_BLOCKQUOTE_TT);
					$this->_jsbutton('entities',"entitiesThis()",_ADD_ENTITIES_TT);
// cles::blog core hack

５．nucleus/language/japanese-utf8.php(493行目付近)

define('_ADD_PASTE_TT',				'ペースト');

このような部分があるので下記のようになるように書き換える

define('_ADD_PASTE_TT',				'ペースト');
// cles::blog core hack
define('_ADD_ENTITIES_TT',          '特殊文字変換');
define('_ADD_BLOCKQUOTE_TT',        '引用');
// cles::blog core hack

６．画像の追加

以下の２つの画像をnucleus/imagesに追加