編集ボタン用スクリプト変更の要望(第一弾)

hatena.d hatena.d2

概要

　ダイアリーの標準編集画面で、太字ボタンやイタリックボタンを複数行対応にして欲しい。

現状

　ダイアリーの標準編集画面で、複数行を指定して太字ボタンやイタリックボタンを使用すると、

一行目
二行目
三行目

が

<span style="font-weight:bold;">一行目
二行目
三行目</span>

となる。展開されるHTMLは、

<p><span style="font-weight:bold;">一行目</p>
<p>二行目</p>
<p>三行目</span></p>

となり、ドinvalidになる。

要望

　上記の例で、

<span style="font-weight:bold;">一行目</span>
<span style="font-weight:bold;">二行目</span>
<span style="font-weight:bold;">三行目</span>

となる様にして欲しい。

　展開されるHTMLは、

<p><span style="font-weight:bold;">一行目</span></p>
<p><span style="font-weight:bold;">二行目</span></p>
<p><span style="font-weight:bold;">三行目</span></p>

となり、随分マシになる。

解決案

　「/js/dairy_edit.js」の「function addSpanProperty()」を「function addSpanPropertySimple()」と改名した上で、下記の通り「function addSpanProperty()」を作り直す。(WinXPのIE6SP2、Firefox1.5.0.3、Opera8.54で確認)

 function addSpanProperty(text, newPropName, newPropValue, deleteIfIncluded) {
// 一行の場合
   if (text.length==0 || !text.match(/(\r?\n|\r)/)) {
     return addSpanPropertySimple(text, newPropName, newPropValue, deleteIfIncluded);
   }
// 複数行の場合
   text = text.replace(/(\r?\n|\r)/, "\n");
   var oneLineText = text.split("\n");
   for ( i = 0; i < oneLineText.length; i++ ) {
     oneLineText[i] = addSpanPropertySimple(oneLineText[i].replace(/(\r?\n|\r)/,""), newPropName, newPropValue, deleteIfIncluded);
   }
   return oneLineText.join("\n");
 }

未解決の既出問題

  • 選択範囲内にspan要素が入れ子になっていると誤動作する。
  • 一行中にspan要素が複数有ると、誤動作する。
  • リスト記法に対応できていない。
  • delボタンでも同様の問題が起きるが対応を考えていない。

結語

　はてなアイデアに出すには未成熟なので、とりあえずここにメモのみ(^^;