Archive

‘WebDesign’ 分類過的Archive

CKeditor 自訂工具列及字型和預設大小設定

2013年7月26日 尚無評論

CKEDITOR 很多專案都有採用,不過似乎不太可能直接下載解開就直接採用

雖然常有工程師都是偷懶的直接全放上去,但其實對資安及友善度來說都是不建議的

像一般工具列,如按完整的版本上去,出現的畫面會如下:

看到了吧,這未免也太多功能按鈕了而且又沒有列的很好,有時想要一個自訂的工具列,如下圖

雖然他目前有提供基本、標準、完整、及客製,不過前三個大多都不是我個人慣用的工具列

而客製看來有點小複雜,因為不太清楚哪個功能是哪個plugin 所以試了試也就放棄,還是上網找找傳統在fckeditor的一些設定調整方式好了

(先前fckeditor 都會把相關參數設定放置fckconfig.js,要調整都非常方便,可是ckeditor config.js 現在變的太乾淨了…全都拿掉了)

可以參考http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar 這篇,就有提及如何調整工具列,所以可以參考該篇將

config.toolbar = 'Full';
 
config.toolbar_Full =
[
	{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
	{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
	{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
	'/',
	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
	'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
	{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
	'/',
	{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
	{ name: 'colors', items : [ 'TextColor','BGColor' ] },
	{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

直接放入config.js  CKEDITOR.editorConfig = function( config ) { …} 之中即可,然後再依按鈕的順序調整一版是自己要的工具列即可,是不是比客製的還容易呢?

如果要在字型之中加上中文字型,可以參考 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.font_names 這篇

一樣在其中加上你要的字型即可,以下範例是偷懶作法,用預設值直接加上中文字型 (記得config.js要轉換編碼為UTF8 不然看到會是亂碼

config.font_names = "新細明體;標楷體;微軟正黑體;" +config.font_names ;

最後如果編輯框想設定預設寬高的話,只要再加上:

config.height = 250; 
config.width = 600; 

這樣就可以調整成如你想要的編輯器了!!

當然還有很多參數要再調整,但這上述這幾個是最常用的,所以先寫下來介紹給大家!!

好用的JSON.stringify(物件建立JSON字串)

2013年5月12日 尚無評論

在Client Server 架構,最麻煩的就是debug,單單server 可以用開發工具的debug mode來抓問題,而client只能借助一些瀏覽器的工具來抓問題而且也沒有debug mode,頂多只有console.log 可以用,多半都要用alert 來顯示相關資訊,而現在ajax 盛行,要抓問題時,不再只是顯示一個單值這麼容易,所以今天來介紹一下如何顯示json的值!

JSON.stringify是什麼呢?

在查資料的同時,才發現自己都是東摸一點,西學一點,沒有學習一個完整性,所以都要花上不少時間,或浪費不少時間,json格式已經瞭解並大量在使用了,但看到JSON.stringify才知,這麼好用的函式怎麼這麼晚才去瞭解呀!  在Firefox 3.1、Internet Explorer 8以上,已經都有支援,它可以將物件轉成JSON字串,所以在查詢時就很方便,以往當我們要將javascript 的物件查看其內容時,在alert 這物件只會顯示這是個[object],還要特別去指定一個屬性才會顯示該屬性質,要查詢時蠻不方便的,而透過JSON.stringify轉成JSON字串後,就可以很輕鬆查看

JSON.stringify怎麼用?

使用語法:

JSON.stringify(value [, replacer] [, space])
value:目標物件(陣列)
replacer:要比對顯示的對像物件(陣列)
space:要補的空白

如果你有個物件要顯示,最簡單的方式如下:

var obj= new Object();
obj.name="Tony";
obj.age=33;
obj.tel="0912332112";
obj.sex="M";

alert(JSON.stringify(obj));

這時你可以得到:

 

多棒呀!!,JSON完整的資訊全顯示出來了,不過還有更棒的,可以在後面加上空白

alert(JSON.stringify(obj,null,4));

顯示時排列的很整理,更方便閱讀了說!!

至於中間參數replacer的用法,就是可以進行過濾的動作,將符合replacer的顯示出來,相關用法我這邊就不多寫了,如有興趣,可以看這篇文章,寫的蠻不錯的~簡單易懂 : JSON.stringify 语法讲解 – 随风浪迹天涯 – 博客园

感想

以往再使用json都是透過ajax 傳遞,所以可以透過查看response就可以看到相關內容,這次單單用在client就覺得JSON.stringify特好用的,看來還是要多多把基本功打好才行呀~^^

Categories: AJAX, Java Script, WebDesign, 未分類 Tags:

關閉Android預設(原生)瀏覽器後session及cookie的保留注意事項

2013年4月23日 尚無評論

一個很簡單的session及cookie幾乎花上了我快一天的時間當然要特別寫下來紀念一下…^^||

有一定網頁開發經驗的人都應該知道,網頁使用session時,一般在關閉瀏覽器後再重啟,因為session ID不同所以就算失效了,但目前發現android預設的原生瀏覽器(採用webkit引擎)在關閉瀏覽器後再重啟,原session 還是存在,但在iphone上用safair就和電腦上的情況是一樣。

後來改用cookie設定max-age 的有效期(expire) 為session就是關閉瀏覽器後也會自己失效,沒想到也是一樣的情況,最後確認當手機重新啟動後再試同樣的流程,session及cookie(效期是session)的就會都失效了

以上測試的手機android版本為2.3.7 , 4.x ,有motorola的defy,samsung的S2,HTC z710e,SONY的xperia z都是一樣的結果。

所以結論是在android原生瀏覽器上,可能是為了方便還是覺得手機是個人化的用品,所以當離開瀏覽器後並不會讓sessoin scope的session & cookie失效,但其它瀏覽器,例如:dolphin(海豚),chrome,opera,Firefox等就都不會這樣…

最後,當然session等超過server可接受的時間(一般是預設30分鐘),還是會失效的,因為Server上已經沒有保留你的session ID,拿原本的session ID當然沒有用了;不過cooike就不會啦~因為原生瀏覽器會把你當做還是在當次使用的。 

似乎這樣的資訊,在網路上好像沒啥人寫,希望上述資訊可以讓有同樣困擾的人不要和我白白花費這麼多時間在測試~XD

Categories: WebDesign Tags: , ,

如何設定CSS只適用於IE使用

2012年6月26日 尚無評論

IE真的很煩,往往不同的版本CSS的效果都不太一樣,這次遇到是IE7以前的不合用

所以為了要向下相容,所以必須針對IE6 IE7 進行特別的CSS stylesheet的設定

印象中以前就看過,所以沒有花很久的時間就找到需要的資訊,試用一下~合用的呢~^^
這文章裡面有蠻多為了IE相容而彈性的參數設定,寫下來給自己以後參考一下:

只給IE瀏覽器使用

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />
<![endif]–>

只不給IE瀏覽器使用

<!–[if !IE]><!–>
<link rel=“stylesheet” type=“text/css” href=“not-ie.css” />
<!–<![endif]–>

只給IE 7瀏覽器使用

<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie7.css”>
<![endif]–>

只給IE 6瀏覽器使用

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

只給IE 5瀏覽器使用

<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” href=”ie5.css” />
<![endif]–>

只給IE 5.5瀏覽器使用

<!–[if IE 5.5000]>
<link rel=”stylesheet” type=”text/css” href=”ie55.css” />
<![endif]–>

只給IE 7以下的瀏覽器使用

<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />
<![endif]–>

把lte ->lt 就變成IE7 前的版本適用(不含IE7) ,反之如果要IE7以上的就改成 gte 即可

 

上述是整個CSS檔案去判斷要不要使用,而我們也可以在CSS檔裡針對各stylesheet 去限定只適用於哪個IE瀏覽器版本

限IE6瀏覽器使用

* html #div {
height
: 300px;
}

限IE7瀏覽器使用

*+html #div {
height
: 300px;
}

限IE8瀏覽器使用

#div {
height
: 300px \0/;
}

限IE7 & IE8瀏覽器使用

#div {
height
: 300px\9;
}

IE7瀏覽器不能使用

#div {
_
height
: 300px;
}

IE6瀏覽器以下不能使用

#div {
height/**/:300px; 

 

html > body
#div {
height:300px;
}

結尾…..

為啥微軟不好好走正確的路線呢~~有時間加上這些相容的參數,卻不安份的走歪路~真討厭

參考資料:http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Categories: WebDesign Tags: ,

用YUI Compressor精簡你的肥肥Javascript及CSS檔案吧

2010年10月13日 尚無評論

   小弟先前有個客戶網站用了大量特效及圖片,在監控時發現,讀取首頁時瀏覽者讀了3.1MB才能讀完,在進行瘦身後瀏覽者只要讀700KB左右就能讀完,如果不考慮網站頻寬,以現今效多瀏覽者使用的網路頻寬為2M/256K為例,前者需要12秒而後者只需3秒左右,是不是落差很大呢? 如果是你,你會想上前者這樣的網站嗎?

     網站使用者都是希望你的網站是很友善、美觀及很快速的,在現今友善化的網站,大多都使用很多javascript及css,所以相對的你將會降低的是你的網站執行效能。 為此,如何將這些javascript 及css sytle 減少系統及頻寬的loading,這就是當務首要,也是現今網站規畫中,要注意的一環。

     會影響網站效能的原因很多,今天就介紹如何做好一些上版時的動作來增加效能,先前有提及可以針對你的網站伺服器開啟使用gzip 來進行網頁的壓縮,以減少網站頻寬的使用;今天來介紹可以使用YUI Compressor工具來降低你的javascript及css style檔案的大小,因為這些都是原始碼,為了方便編輯及辨識,所以開發人員往往加上許多顯示格式所需要的字元,再加上web 2.0盛行,大量的函式庫的引用,都會讓你的檔案不小心就會慢慢變的很大。以jquery-v1.3.js來看,一百多K的檔案精簡後jquery-min-v1.3.js 只剩不到60K如果再加上gzip傳輸應該頻寬會省更大。

     以下則為該工具的介紹 :

YUI Compressor – The Yahoo! JavaScript and CSS Compressor Download
下載地址 : http://www.julienlecomte.net/yuicompressor/
The YUI Compressor requires Java version >= 1.4. (機器需要Java 1.4以上的環境)

可建立一個批處理文件,例如YUICompressor.bat,文件內容如下:

@echo off
::設置YUI Compressor啟動目錄
SET YUIFOLDER=D:\yuicompressor-2.4.2\build
::設置你的JS和CSS根目錄,腳本會自動按目錄層次查找和壓縮所有的JS和CSS
SET JSFOLDER=D:\mySite\myJS
echo 正在查找 JavaScript, CSS …
chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do (
@echo 正在壓縮 %%~a …
@java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar –charset UTF-8 %%~fa -o %%~fa
)
echo 完成!
pause & exit

參考資料:http://hi.baidu.com/zdz8207/blog/item/d644ae6ea0f2c5d181cb4ab7.html

Categories: WebDesign Tags: , ,
分頁: 1 2 3 4 下一頁