【實驗成功】新增quicktag按鈕
十二月 7th, 2006 by 小柯
受到Robbin兄這篇文章的啟發
我開始了修改quicktag的工程
不過不知道是怎麼著
照著Robbin兄上面的寫法 沒辦法出現預期中的效果
(我猜是引號使用上的差別 還有可能有些東西沒有正常顯示)
另外我也希望他能夠跳出視窗來詢問我想要的span class(底線種類)
或者是font size/font color
於是我這個程式文盲摸索了一陣子
總算從quicktag.js原始檔的前後文中 摸索出我要的東西
↑上一篇的合歡殘雪 有人提到不輸歐美風光
這篇清境遠眺 應該也不會差上太多吧 :-D
(點圖可以看大圖 相關照片請往這邊走)
(請注意 此篇是針對使用非所見即所得編輯器的朋友而寫的)
首先開啟wp-includes/js/quicktag.js這個檔案
找到這一段程式碼：
-
/*
-
edButtons[edButtons.length] =
-
new edButton('ed_next'
在這一段的上面 加上這一段程式碼：
-
edButtons[edButtons.length] =
-
new edButton('ed_font'
-
,'font'
-
,''
-
,'</font>'
-
,'f'
-
);
-
-
edButtons[edButtons.length] =
-
new edButton('ed_line'
-
,'line'
-
,''
-
,'</span>'
-
,'lin'
-
);
接著找到這一段程式碼：
-
}
-
else if (button.id == 'ed_link') {
-
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
-
}
在他的上頭(上一行)加上這一段程式碼：
-
}
-
else if (button.id == 'ed_line') {
-
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertline(edCanvas, ' + i + ');" value="' + button.display + '" />');
-
}
-
else if (button.id == 'ed_font') {
-
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertfont(edCanvas, ' + i + ');" value="' + button.display + '" />');
(注意 請自行找到}之前來插碼)
最後到整個檔案的最下頭 貼上這一段程式碼：
-
function edInsertline(myField, i, defaultValue) {
-
if (!defaultValue) {
-
defaultValue = '';
-
}
-
if (!edCheckOpenTags(i)) {
-
var spclass = prompt('Enter span class' ,defaultValue);
-
if (spclass) {
-
edButtons[i].tagStart = '<span class="' + spclass + '">';
-
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 = '<font size="'
-
+ fsize
-
+ '" color="' + prompt('Enter the font color', '')
-
+ '">';
-
edInsertTag(myField, i);
-
}
-
}
-
else {
-
edInsertTag(myField, i);
-
}
-
}
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
其實你的寫法要比我的寫法要好的多了
因為我的方式只是在編輯區直接插入像是font color=""
其中的""在手動填入，而不是另外跳出一個視窗。
哎呀，太棒了。等這個週末有空也來改看看。^_^
我之前也是照robbin的教學修改，也一樣沒有另外跳出視窗的效果。這次來試試小柯的教學。感謝啦！
to robbin兄：
呵呵 沒有你的開頭
我也想不到要去改這些東西
to Dreamy：
試試看吧
我自己測試的結果是沒問題的
注意插碼的位置就好了 :-D
本站plug-in清單及更新記錄…
資料庫備份
安裝此外掛後，在管理界面會出現資料庫備份選項。
Page Navi
頁面末端頁碼顯示，不再是只有 previous, next
2006-11-10更新︰改用Pagebar這個分頁顯示外掛.
[php wp_pagebar(array(‘before…
看了這兩天的山景
突然有點感觸，前陣子也去過一趟南投-埔里-奧萬大-清境
現在想起來，真後悔自己沒有卯起來拍多些照片回來，有點懊惱
to Robbin兄：
這一次的遺憾 是下一次的原動力 8-)
[...] 我曾經寫過自己站內的quicktag效果追加分享，小柯兄也寫出他的清楚又方便的追加quicktag教學，一般常用的文章標籤，大概用這兩個方式就可以修改。 [...]
[...] 我曾經寫過自己站內的quicktag效果追加分享，小柯兄也寫出他的清楚又方便的追加quicktag教學，一般常用的文章標籤，大概用這兩個方式就可以修改。 [...]