greasemonkey script: blogger little toys

使blogger的編輯畫面增加三個按鈕，第一個可以把選取範圍的內容的 < >換成相對應的HTML entities，第二個可以把選取的範圍加上 <pre class="code"> <>，第三個可以把選取的範圍加上<blockquote><div> </div></blockquote>，因為我的blockquote有兩張底圖，所以要<blockquote>裡面要用<div>多包一層。算是第一個稍具實用性的script。

code部分參考兩篇，主要是 text selection的部分：

Flash Kit Community Forums - getSelection in TEXTAREA?
http://www2.blogger.com/app/scripts/form.textbar.js

// ==UserScript==
// @name          blogger little toys
// @namespace     http://birdegg
// @description   add useful editing tools to blogger
// @include    http://*.blogger.com/post-create.g?blogID=*
// @include    http://*.blogger.com/post-edit.g?blogID=*
// ==/UserScript==

function replaceLtGt(){
   var f = document.getElementById('textarea');
   var s1 = f.value.substring(0, f.selectionStart);
   var s2 = f.value.substring(f.selectionStart, f.selectionEnd);
   var s3 = f.value.substring(f.selectionEnd, f.textLength);
   s2 = s2.replace(/</ig, '&lt;').replace(/>/ig, '&gt;');
   f.value = s1+s2+s3;
}
function wrapSelection(left, right){
   var f = document.getElementById('textarea');
   var s1 = f.value.substring(0, f.selectionStart);
   var s2 = f.value.substring(f.selectionStart, f.selectionEnd);
   var s3 = f.value.substring(f.selectionEnd, f.textLength);
   s2 = left + s2 + right;
   f.value = s1+s2+s3;
}
function wrapSelectionWithBlockquote(){
return wrapSelection('<blockquote><div>', '</div></blockquote>');
}
function wrapSelectionWithPre(){
   return wrapSelection('<pre class="code">', '</pre>');
}

function run(){
   var f = document.getElementById('textarea');
   var htmlbar = document.getElementById('htmlbar');
   var btn1 = document.createElement('input');
   btn1.value = '&lt;&gt;';
   btn1.type = 'button';
   btn1.addEventListener("click", replaceLtGt, false);
   var btn2 = document.createElement('input');
   btn2.value = '<BlockQuote>';
   btn2.type = 'button';
   btn2.addEventListener("click", wrapSelectionWithBlockquote, false);

   var btn3 = document.createElement('input');
   btn3.value = '<Code>';
   btn3.type = 'button';
   btn3.addEventListener("click", wrapSelectionWithPre, false);

   btn1.style.padding = btn2.style.padding = btn3.style.padding = '0';
   btn1.style.border = btn2.style.border = btn3.style.border = '1px solid black';
   btn1.style.backgroundColor = 'white';
   btn2.style.backgroundColor = 'white';      
   btn3.style.backgroundColor = 'white';
   anchor = document.getElementById('key_commands');

   anchor.appendChild(btn1);
   anchor.appendChild(btn3);
   anchor.appendChild(btn2);
}
(
function(){
   run();
}
)();