Archive

‘Java Script’ 分類過的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:

如何用javascript控制css margin-left 參數

2009年2月12日 尚無評論

最近有case要用javascript控制css margin-left 參數

用了以下的語法控制,是沒有用的

function
setMargin()
{
document.getElementById(“Picture”).style.margin-left =
“200px”;
}


去查了一下,才知-這個符號是要拿掉才行的

function
setMargin()
{
document.getElementById(“Picture”).style.marginLeft =
“200px”;
}


這個命名的小小注意事項,看來沒有常用的人,會一直忘掉要這樣調整的
寫下來怕忘了

資料來源:
http://bytes.com/groups/javascript/527124-how-set-margin-left-ie-w-javascript

Categories: Java Script Tags: ,

JSON 解析與運用 for Java

2009年1月24日 尚無評論

json在jQuery使用ajax運用應該常會需要用到

去網路上找一下json目前在java上有沒有好的元件可以使用,找到一個不錯的open source,網址如下:

http://www.json.org/java/

他除了提供java物件轉換成json格式的功能
還有xml 與json之間互轉的實作,
所以算是該有的都有了,不過小弟目前只使用簡單的傳參數
所以就先介紹這個囉:

JSONObject  j = new JSONObject();
j.put(“code”,”000″);
j.put(“msg”,”hello world”);
out.println(j.toString());

最後會得到

{“code”:”000″,”msg”:”hello world”}

如果要更多的用法,它所提供的sample code就非常完整,千萬要先看一下,包你事半功倍 !!

Categories: Java Script Tags: ,

jQuery抓取跨網域外的資料(cross-domain) 運用JSONP

2009年1月21日 5 則評論

最近在測如何用jQuery讀取其它網頁的資料顯示,在網路上找到一篇簡單利用jQuery取得yahoo RSS新聞的範例,在本機可以執行,但一上server後就出現了沒有使用權限的問題

先前大概瞭解Javascript因為安全性問題,所以無法進行cross-domain的讀取,所謂cross-domain就是跨網域讀資料簡單來說就是a.com的網頁程式要去取b.com網頁資料,不過在現在web 2.0的時代,常會有需要進行跨網域的讀取,所以一樣大致上網整理了一下,目前有的作法如下:

JSONP

jQuery的文件有提到,從1.2版本開始支援使用 jQuery.getJSON(url,[data],[callback])
來進行跨網域讀取資料,原文如下:

As of jQuery 1.2, you can load JSON data located on another domain if you
specify a JSONP
callback, which can be done like so: “myurl?callback=?”. jQuery automatically
replaces the ? with the correct method name to call, calling your specified
callback.

如果要懂JSONP是什麼,小弟先前有篇文章就有提到,在此不多說啦,JSONP其實就是運用json資料格式,及回呼程式(callback=?)的方式達到可以取得到其它網域的資料並且執行後續callback的function,現在目前很多open API 例如yahoo,google, flickr 等都有支援callback的方式。

不過一般要使用JSONP,就是要你Client及Server之間的偶合度要高,除了其它有提供支援的網站可以使用外,所以適用度是有點限制的,不過還是要介紹一下,如何運作,在國王的新衣: JSONP 這篇網誌有提供取得flickr的圖片,小弟稍做修改成jQuery的寫法:

Client端:

$(function() {
   $('#button1').click(function(){
  var strURL='http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all&format=json&jsoncallback=doPhoto';
  $.ajax({
     type:'GET',
     dataType:'jsonp',
     url:strURL,
   error: function(xmlHttpRequest,error) {
     alert('Ajax request ERROR');
   }
  })
   })
});
function doPhoto(result) { 
  var div = document.getElementById(“flickr”); 
  for(var i=0; i < result.items.length; i++) { 
   var img = document.createElement(“img”); 
   img.setAttribute(“src”,result.items[i].media.m); 
   img.setAttribute(“alt”,result.items[i].title); 
   var a = document.createElement(“a”); 
   a.setAttribute(“href”,result.items[i].link); 
   a.setAttribute(“target”,”_blank”); 
   a.appendChild(img); 
   div.appendChild(a); 
  } 

<input name=”button1″ id=”button1″ type=”button” value=”test” />
<div id=”flickr”></div>

Server端:

doPhoto({ 
“title”: “每個人的相片 已標籤 羅平, 油菜花 和 sunset”, 
“link”: “http://www.flickr.com/photos/”, 
“description”: “”, 
“modified”: “2007-04-22T14:19:09Z”, 
“generator”: “http://www.flickr.com/”, 
“items”: [
{
“title”: “羅平金雞嶺夕陽”, 
“link”: “http://www.flickr.com/photos/38362352@N00/468370409/”, 
“media”: {“m”:”http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg”}, 
“date_taken”: “2007-04-22T22:19:09-08:00”, 
“description”: “…”, 
“published”: “2007-04-22T14:19:09Z”, 
“author”: “nobody@flickr.com (Nature RGB)”, 
“author_id”: “38362352@N00”, 
“tags”: “sunset yunnan 油菜花 羅平” 
}
]
}) 

當Server端回傳json格式的資料時,會依callback傳的doPhoto回傳,剛好client我們有個doPhoto function去執行接收到json的資料,大致就是這樣,而http://a.webvm.net/也有一個很簡單的範例,是呼叫另一個domain的json格式的 hello world 。

跨域代理(Cross Domain
Proxy)

主要原理就是用php或者其他語言寫一個代理請求的轉發過程。客戶端請求自己的服務器,服務器把請求轉發到目標地址並且得到回應,服務器再
把結果返回給客戶端。這個過程,對於開發者來說還是不錯的選擇,因為你可以在服務器上對回應的結果做自己的處理,可以決定需不需把結果要返回給客戶端。 不過還是一樣,需要有伺服端的配合,不過至少不用限制說一定要被請求端回傳json格式的資料才行,而這個proxy寫起來不然但小心有心人士利用,所以還是要判斷一下是不是由你認定的客戶端下的請求或是限定只proxy哪些網址。

而參考範例,以參考 Javascript 抓取跨網域外的資料  Tsung's Blog 的文章,但也是調整一下來看:

Client端:

$(function() {
  $('#button1').click(function(){
  $.ajax({
    type:'Post',
    dataType:'html',
    data: {
    strURL:'http://tw.yahoo.com/'
    },
    url: “proxy.jsp”,
  error: function(xmlHttpRequest,error) {
    alert('Ajax request ERROR');
  },     
     success:function(html){
       $(“#flickr”).html(html);
     }
  })
  })
});

<input name=”button1″ id=”button1″ type=”button” value=”test” />
<div id=”flickr”></div>

Server端:

<?php
if (isset($_POST['url']) && !empty($_POST['url']))
{
    // 記得檢查此 URL 是不是你發出的 request
   echo
file_get_contents($_POST['url']);
}
?>

參考資料:
http://www.dotblogs.com.tw/topcat/archive/2008/08/08/4846.aspx
http://blog.zol.com.cn/859/article_858048.html
http://plog.longwin.com.tw/programming/2008/12/15/javascript-ajax-get-cross-domain-data-2008
http://carffuca.javaeye.com/blog/65239
http://happytemplate.blogspot.com/2007/11/jsonp.html
http://ibox.blog.sohu.com/107171814.html
http://www.javaeye.com/topic/169765
http://a.webvm.net/

Categories: Java Script Tags: , ,
分頁: 1 2 3 下一頁