2012-07-20

[LESS] 在windows下編譯*.less

這篇不介紹 LESS 是甚麼,只記錄一下怎麼準備在 windows 下用 command-line 編譯 *.less 的環境.

 

  1. 安裝 node.js
    直接從 node.js 網站下載msi安裝檔後執行安裝即可.
  2. 透過 npm 安裝 less
    npm是node.js的package manaer,安裝完 node.js 後就會這程式可以用.
    所以只要透過npm安裝less這個package就可以了.
    首先執行node.js command prompt,在開啟的command視窗下執行

    npm install less -g

    LESS官方網站上說明是是直接使用 npm install less,不過為了方便使用lessc,
    所以建議加上-g, 將它安裝成global package
    執行完指令後,就等它跑完就可以使用lessc了
  3. 使用 lessc 編譯*.less
    在node.js command prompt的視窗下先切換到你要編譯的 *.less 檔案目錄下,
    然後執行下面指令

    lessc filename.less > filename.css

    執行完後,指定的css檔就會產生在所在的目錄下

2012-07-18

[umbraco] Enabling the insert predefined template content for TinyMCE

umbraco version : 4.5.2

在預設的安裝下,umbraco的Richtext editor裡的insert predefined template content也是未啟用的.

umbraco-insert template

如果要啟用的話,可以照下列的步驟執行.

 

1.修改/config/tinyMceConfig.config

 

1.1. 新增下面片段在[tinymceConfig \ commands]裡

<command>
    <umbracoAlias>Templates</umbracoAlias>
    <icon>images/editor/template.gif</icon>
    <tinyMceCommand value="" userInterface="true" frontendCommand="template">template</tinyMceCommand>
    <priority>76</priority>
</command>

其中的icon可以找一張好辨識的圖片,這圖片是用在data type的設定上,跟editor的tool bar上的圖片無關.

priority請找一個未使用的數字,如果跟其他的command重複的話,執行時會有錯誤.

 

1.2. 新增下面片段在[tinymceConfig \ plugins]裡

<plugin loadOnFrontend="true">template</plugin>

 

1.3 新增下面片段在[tinymceConfig \ customConfig]裡

<config key="nonexistingkey”>
<![CDATA[',
template_templates:[
      {
      title : "Two Column",
      src : "/home/TwoCol.aspx",
      description : "Two Column layout"
      }],
      template_popup_height : '400]]>
</config>
其中,nonexistingkey可以隨意命名,只要不跟其它的重複就可以.
而src當然就是template的路徑,只要確定可以存取到就好了.
 

2.重啟application pool

因為改過了config檔,所以要重啟application pool才能讓config生效.

 

3.修改Data Type中的Richtext editor設定

在Richtext editor的buttons設定中會出現剛剛所設定的圖示,

勾選剛剛新增的圖示後儲存.

 

4.確認editor的結果!

還沒結束!

 

上面的設定大致上說明了怎麼在umbraco下啟用tinymce的template功能.

不過如果每次要加template就要改設定檔,然後要重啟app pool,那就太累了.

在tinymce editor除了透過template_templates設定外,也允許將template的list設定外獨立的js中.

如果你要設定成獨立的js檔,

可以將步驟1.3改成如下:

      <config key="template_external_list_url">/home/templatelist.js</config>
      <config key="template_popup_height">400</config>


改成使用template_external_list_url,並指定js的路徑.


而js的內容格式如下:

var tinyMCETemplateList = new Array(
        // Name, URL
      ["Tab layout","/home/layoutTab.htm"],
      ["Solution Form","/home/formSolution.htm"]
);


這樣修改後,以後如果要新增新的template給editor,只要新增template後,修改js檔就可以了.


就不用再動到config檔.


到這,就真的結束了.


 


參考資料 :


Enabling the 'Template' plugin for TinyMCE


http://our.umbraco.org/wiki/how-tos/enabling-the-'template'-plugin-for-tinymce


TinyMCE – Template


http://www.tinymce.com/wiki.php/Plugin:template

[umbraco] Enabling the paste plain text button (plugin) for TinyMCE

umbraco version : 4.5.2

在預設的安裝下,umbraco中的html editor(也就是TinyMCE)的paste plain text是沒有被啟用的,

umbraco-paste-plain-text

如果要啟用這的功能(按鈕),

請照下面步驟執行.

 

1.修改tinyMceConfig.config

新增下面的設定在[tinymceConfig \ commands]裡

<command>
    <umbracoAlias>mcePasteText</umbracoAlias>
    <icon>images/editor/paste.gif</icon>
    <tinyMceCommand value="" userInterface="true" frontendCommand="pastetext">pastetext</tinyMceCommand>
    <priority>77</priority>
</command>

其中的icon可以找一張好辨識的圖片,這圖片是用在data type的設定上,跟editor的tool bar上的圖片無關.

而priority請找一個未使用的數字,如果跟其他的command重複的話,執行時會有錯誤.

 

2.重啟application pool

因為改過了config檔,所以要重啟application pool才能讓config生效.

 

3.修改Data Type中的Richtext editor設定

在Richtext editor的buttons設定中會出現剛剛所設定的圖示,

勾選剛剛新增的圖示後儲存.

 

4.確認editor的結果!結束!

2012-07-09

Google Picker API

很久沒更新部落格了,

因為現在的工作很是煩悶,所以已經很久無心經營部落格了...

最近試著用java開發個網站放在Google app engine上玩,

也順便要丟在facebook的app下...

裡面的管理介面有個功能是要放張圖片,

本想說看看有沒有人用jQuery寫個plugin可以方便選擇picasaweb上的圖片,

沒想到Google已經有提供了,就是Google Picker API.

而這個Picker不只有picasaweb上的圖片,還可以選擇Google雲端硬碟的上檔案.

而介面效果就是Google雲端硬碟上的介面.

廢話不多說,直接點下面的連結看看效果吧.

demo : http://ajunlee.blogspot.tw/p/google-picker-example.html

ps.這個demo是放在blogger提供網頁的功能下.

 

參考 :
Google Picker API Developer's Guide

 

ps.像這種Picker的機制,好像也可以應用在公司內部多種平台的整合...

Google以後可以查祖譜嗎?

今天看到一篇INDISE的文章 : 比爾蓋茲和賈伯斯,他們的孩子都是 14 歲才能用手機 想說比爾蓋茲不是有點年紀了嗎? 他的小孩應該也都不小了. 他們14歲時應該還沒有甚麼智慧手機吧… 說不定還是在BB call的年代. 所以就好奇的用google查一下有沒...