【實驗成功】新增quicktag按鈕

7 12 月, 2006 by

受到Robbin兄這篇文章的啟發
我開始了修改quicktag的工程
不過不知道是怎麼著
照著Robbin兄上面的寫法 沒辦法出現預期中的效果
(我猜是引號使用上的差別 還有可能有些東西沒有正常顯示)
另外我也希望他能夠跳出視窗來詢問我想要的span class(底線種類)
或者是font size/font color
於是我這個程式文盲摸索了一陣子
總算從quicktag.js原始檔的前後文中 摸索出我要的東西

↑上一篇的合歡殘雪 有人提到不輸歐美風光
　這篇清境遠眺 應該也不會差上太多吧 :-D
　(點圖可以看大圖　相關照片請往這邊走)

(請注意 此篇是針對使用非所見即所得編輯器的朋友而寫的)

首先開啟wp-includes/js/quicktag.js這個檔案
找到這一段程式碼：

[js]
/*
edButtons[edButtons.length] =
new edButton(‘ed_next’
[/js]

在這一段的上面 加上這一段程式碼：

[js]edButtons[edButtons.length] =
new edButton(‘ed_font’
,’font’
,”
,’‘
,’f’
);

edButtons[edButtons.length] =
new edButton(‘ed_line’
,’line’
,”
,’‘
,’lin’
);[/js]

接著找到這一段程式碼：

[js]
}
else if (button.id == ‘ed_link’) {
document.write(‘‘);
}
[/js]

在他的上頭(上一行)加上這一段程式碼：

[js]
}
else if (button.id == ‘ed_line’) {
document.write(‘‘);
}
else if (button.id == ‘ed_font’) {
document.write(‘‘);
[/js]

(注意 請自行找到}之前來插碼)

最後到整個檔案的最下頭 貼上這一段程式碼：

[js]
function edInsertline(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = ”;
}
if (!edCheckOpenTags(i)) {
var spclass = prompt(‘Enter span class’ ,defaultValue);
if (spclass) {
edButtons[i].tagStart = ‘‘;
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
}

function edInsertfont(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = ”;
}
if (!edCheckOpenTags(i)) {
var fsize = prompt(‘Enter font size’ ,defaultValue);
if (fsize) {
edButtons[i].tagStart = ‘‘;
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
}
[/js]

OK！大功告成 把檔案存檔後 上傳覆蓋原始檔案
到後台進入編輯畫面 建議ctrl+F5一下重新載入新的quicktag.js
就會看到文章編輯按鈕中多了一個叫font跟一個叫line的按鈕
點下font,就會詢問你要使用的文字尺寸(font size),以及文字色彩(font color)
點下line,就會詢問你要選用的底線效果(span class)
(關於底線效果的修改方式請參考robbin兄的這篇介紹)


ps.程式碼醜了點 因為沒辦法斷行跟顯示顏色
　　不過根據我自己的測試 直接C/P就可以正常運作(有時間的人可以自己去斷行XD)
感謝robbin兄推薦的iG::Syntax Hiliter解決了我貼code的煩惱

以上 報告完畢 如有問題請回報 *swe

Posted in 部落格OA桌 | 8 Comments »

8 Responses to “【實驗成功】新增quicktag按鈕”

  1. Robbin
    on 07 12 月 2006 at 5:02 上午   | Permalink |

    其實你的寫法要比我的寫法要好的多了
    因為我的方式只是在編輯區直接插入像是font color=””
    其中的””在手動填入，而不是另外跳出一個視窗。

  2. Dreamy
    on 07 12 月 2006 at 12:36 下午   | Permalink |

    哎呀，太棒了。等這個週末有空也來改看看。^_^

    我之前也是照robbin的教學修改，也一樣沒有另外跳出視窗的效果。這次來試試小柯的教學。感謝啦！

  3. rodgers
    on 07 12 月 2006 at 11:32 下午   | Permalink |

    to robbin兄：
    呵呵 沒有你的開頭
    我也想不到要去改這些東西

    to Dreamy：
    試試看吧
    我自己測試的結果是沒問題的
    注意插碼的位置就好了 :-D

  4. 隨想聖誕部落格
    on 08 12 月 2006 at 2:02 上午   | Permalink |

    本站plug-in清單及更新記錄…

    資料庫備份
    安裝此外掛後，在管理界面會出現資料庫備份選項。

    Page Navi
    頁面末端頁碼顯示，不再是只有 previous, next
    2006-11-10更新︰改用Pagebar這個分頁顯示外掛.
    [php wp_pagebar(array(‘before…

  5. Robbin
    on 08 12 月 2006 at 3:33 上午   | Permalink |

    看了這兩天的山景
    突然有點感觸，前陣子也去過一趟南投-埔里-奧萬大-清境
    現在想起來，真後悔自己沒有卯起來拍多些照片回來，有點懊惱

  6. rodgers
    on 09 12 月 2006 at 3:35 上午   | Permalink |

    to Robbin兄：
    這一次的遺憾 是下一次的原動力 8-)

  7. 【懶人包】WP文章編輯後台 | Robbin.cc
    on 17 1 月 2007 at 11:50 上午   | Permalink |

    […] 我曾經寫過自己站內的quicktag效果追加分享，小柯兄也寫出他的清楚又方便的追加quicktag教學，一般常用的文章標籤，大概用這兩個方式就可以修改。 […]

  8. Robbin.cc » Blog Archive » 【懶人包】WP文章編輯後台
    on 23 1 月 2007 at 6:22 上午   | Permalink |

    […] 我曾經寫過自己站內的quicktag效果追加分享，小柯兄也寫出他的清楚又方便的追加quicktag教學，一般常用的文章標籤，大概用這兩個方式就可以修改。 […]

Trackback URI | Comments RSS

Leave a Reply