網頁設計小技巧~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..關於這個編輯器
];

 

如此即可完成。

網頁設計大膽狂塗網頁設計分享

留下迴響

你必須 登入 才可回覆