網頁設計小技巧~html編輯器設定
網頁設計小技巧~html編輯器設定
pLog 升級到 1.x 後，最大的改變之一應該就是編輯器，
由於目前的設定是 Oscar 決定的，誰叫他是 pLog project lead 呢，
呵呵，所以只好動手來改一下設定：
原本的 1.0.x 版 HtmlArea Toolbat 實在陽春的可以：
不過如果是現在我這個部落格的取向，我覺得還滿好用了，
但是還是會有需要用不同顏色標示重點的時候，
或是需要 Blockquote 來標示重點或程式碼。
最近先找到了 FireFox 的外掛，可以右鍵叫出 bbcode 選單，
可是不知道為什麼在內文的部分卻沒辦法顯示那個選單，
應該還有東西要改吧？
今天在網路上發現了這篇討論，
研究了裡面的說明，將我的改成了現在的樣子：
多了幾個還不錯用的功能，可惜還是沒我想要的 Blockquote，希望之後改版會有。
來紀錄一下修改的方法吧：
首先，到 pLog_Dir/js/htmlarea 下，編輯 htmlarea-plog.js 檔案：
大約 3x 和 5x 行處，會發現以下兩段：
postTextEditor.config.toolbar = [
[ “fontsize”, “space”,”space”,
“bold”, “italic”, “underline”, “strikethrough”, “separator”,
“justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, “separator”,
“orderedlist”, “unorderedlist”, “separator”,
“createlink”, “insertimage”, “insertresource”, “htmlmode” ]
];
postExtendedTextEditor.config.toolbar = [
[ “fontsize”, “space”,”space”,
“bold”, “italic”, “underline”, “strikethrough”, “separator”,
“justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, “separator”,
“orderedlist”, “unorderedlist”, “separator”,
“createlink”, “insertimage”, “insertresource”, “htmlmode” ]
];
這兩段決定了你的 Toolbar 的東西。
如果想要新增，首先要參考一下 pLog_Dir/js/htmlarea/htmlarea.js 這個文件，
裡面範例了一個完全開啟的版本，該文件如下：
this.toolbar = [
[ “fontname”, “space”,
“fontsize”, “space”,
“formatblock”, “space”,
“bold”, “italic”, “underline”, “strikethrough”, “separator”,
“subscript”, “superscript”, “separator”,
“copy”, “cut”, “paste”, “space”, “undo”, “redo”, “space”, “removeformat”, “killword” ],
[ “justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, “separator”,
“lefttoright”, “righttoleft”, “separator”,
“orderedlist”, “unorderedlist”, “outdent”, “indent”, “separator”,
“forecolor”, “hilitecolor”, “separator”,
“inserthorizontalrule”, “createlink”, “insertimage”, “inserttable”, “htmlmode”, “separator”,
“popupeditor”, “separator”, “showhelp”, “about” ]
];
可以看一下內容，自行決定要加入哪些功能。
接著是阿駕自己對上面這段的簡易解釋、備忘：
this.toolbar = [
[ “fontname”, “space”, // 字型選擇 // 空格
“fontsize”, “space”, // 字體大小 // 空格
“formatblock”, “space”, // 字型格式 ( 標題.普通..等等)
“bold”, “italic”, “underline”, “strikethrough”, “separator”, // 粗體..斜體..底線..刪除線.. // 分格線
“subscript”, “superscript”, “separator”, // 上標..下標 // 分格線
“copy”, “cut”, “paste”, // 複製..剪下..貼上
“undo”, “redo”, // 上一步..下一步
“removeformat”, “killword” ], // 移除格式..移除word格式 // 最後的 ], 是用來讓 toobar 分行的
[ “separator”, // 因為前面分行了..記得要再加上一個 [
“justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, // 向左對齊..置中對齊..向右對齊..分散對齊
“lefttoright”, “righttoleft”, “outdent”, “indent”, // 這個好像都是對齊的東西..不知道怎麼解釋
“orderedlist”, “unorderedlist”, “separator”, // 數字..和符號的項目符號
“forecolor”, “hilitecolor”, “separator”, // 字體顏色..背景顏色
“inserthorizontalrule”, “createlink”, “insertimage”, // 加入分格線..建立連結..插入網路上的圖片
“insertresource”, “inserttable”, “htmlmode”, // 插入檔案庫圖片..插入表格..純html編輯器
“popupeditor”, “showhelp”, “about” ] // 全螢幕的大編輯器..不能顯示出來的編輯器help..關於這個編輯器
];
如此即可完成。
