[JavaScript] 將 CSV 檔案轉換成 JSON 資料

我們在拿到客戶提供的資料的時候常常會拿到 excel 檔案(這算幸福的)
至少我們可以簡單的利用一些軟體轉成 csv丟進資料庫裡處理。如果搭配個後端 API 基本上資料都不會是太大的問題可以做成 JSON 供 JavaScript 使用,但是如果在沒有後端或是資料庫的環境中呢?


首先我們先把 csv 檔案放到 server上 利用 $.get() 取得內容,接著將內容String 丟進我們待會會用到的 csvJSON 外掛 function 中。就會取得 JSON
但是這個時候的 JSON 還是 String 的形態所以還無法被解析,我們再加個 JSON.parse() 就可以拿到整個 JSON 物件摟!


function 來源:
https://gist.github.com/iwek/7154578

html線上所見即得編輯器套件 懶人包

我們在建置動態網站的時候其實在後台讓使用者可以自由編輯內文已經是很普遍的現象了
不過還要要來介紹一下CKeditor和Ckfinder這兩個東西

CKeditor 這是一套目前非常多人使用的線上編輯套件,基本上一般人會需要的功能都已經在裡面了,不過不知道為什麼裡面沒有包含圖檔上傳的功能。
好家在,官方有推出一個外掛叫做Ckfinder可以用來支援檔案上傳的功能(那幹嘛不建在一起)因此,大部分的教學文章都會把這兩個套件合在一起說明

下載檔案:
http://ckeditor.com/download  這裡面可以找到CKeditor和Ckfinder

step1:解壓縮CKeditor和Ckfinder
把兩個套件的壓縮檔解開後放在同一個階層的資料夾中(建議)另外在建立一個資料夾當作檔案上傳的資料夾

step2:修改CKeditor設定
CKeditor的設定檔只要修改 ckeditor/config.js 一個檔案就可以完成設定
剛開始打開的時候應該是什麼都沒有設定,這時候你只要把要使用ckfinder外掛的語法貼進來



CKEDITOR.editorConfig = function( config )
{

//ckfindor上傳功能設定
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案
};


step3:修改Ckfinder設定
如同CKeditor,CKfinder也是只需要修改一個檔案就可以完成設定
是的!就是ckfinder/config.js

不過這個檔案會有兩個地方需要設定
a.  return flase 改成 return true
b. 設定檔案上傳後的路徑 $baseUrl

基本上上面的功能已經把CKeditor和CKfinder環境建好了,接下來就是在php頁面上面的套用啦!
html表單部分
<textarea name="editor1"></textarea>
php部分
include_once "ckeditor/ckeditor.php";
$CKEditor = new CKEditor();
$CKEditor->basePath = 'ckeditor/';
$CKEditor->replace("editor1");

include_once 指向的位置就是ckeditor資料夾中ckeditor.php的執行位址,basePath表示放置ckeditor主程式的路徑,replace裡面的參數就是textarea的name

要注意的是,php的那段語法需要皆在textarea後面才有用喔太早使用是沒用的


參考文章:
http://www.minwt.com/?p=2848

留言

這個網誌中的熱門文章

利用 google MAP API 取得座標之間的距離

JavaScript 將 Array 和 Object 轉成 JSON

讓 PHP 接收 post 的 json 資料