CKEditor4 重要配置設定 config.js (中文)

簡單的介紹一下 CKEditor

CKEditor是一個非常強大的HTML編輯器,舊稱FCKeditor,是一個專門使用在網頁上屬於開放原始碼所見即所得文字編輯器套件,2003年就開始累積很多用戶了,至今已經十年的時間了,我想很多開發人員對CKEditor這名字應該不陌生,CKEditor 主要優點而且相容於絕大部分的網頁瀏覽器,該有的功能全都有,也提供非常多的配置及API可以符合各種不同的開發需求,而且最重要的是免費的^^,除此之外官網上也提供了非常多相關的使用範例,還有非常詳細的開發文件可讓開發者更了解使用方式,但此篇文章主要不是介紹CKEditor,而是介紹CKEditor的基本配置Config檔的設定。

CKEditor4的設定有些地方好像跟之前板本不太一樣,那本文介紹的CKEditor4的這個版本,所以測試環境請以CKEditor4為準,CKEditor4可至官網下載,也可由下方連結下載。

CKEditor 相關資源

CKEditor 官方網站
http://ckeditor.com/

CKEditor 下載
http://ckeditor.com/download

CKEditor DEMO
http://ckeditor.com/demo

CKEditor 開發文件
http://docs.ckeditor.com/

CKEditor 開發文件 > config
http://docs.ckeditor.com/#!/api/CKEDITOR.config

重要配置說明如下,主要分為工具列、基本設定、選單設定三大部份~

工具列配置:

基本設定:

關於WORD文字設定

設定選單:

(註一)
解決方法詳見我的另一篇文章
CKEditor4 預設字體大小 fontSize_defaultLabel、預設字型 font_defaultLabel 無法運作的解決方案
http://vector888.blogspot.com/2013/08/ckeditor4-fontsizedefaultlabel.html

(註二)
config.allowedContent;
config.extraAllowedContent;
詳細介紹及用法,詳見我的另一篇文章
CKEditor4 自動清除內容標籤問題的解決方法
http://vector888.blogspot.com/2013/08/ckeditor4.html

[……]

閱讀更多

網頁預設字體大小 12pt VS 12px ~ 傻傻分不清楚

其一直被一個問題困擾著~
就是網頁的預設字體大小~
看很多人在設定CSS都用font-size:12px為預設字體大小~
很多套件的預設字體大小也是用font-size:12px~
但我印象中 12pt 才是網頁預設的字體大小呀~
但看大家都這麼做~我好像混淆了~
可是照12px做為預設字型~
怎麼覺得字好像變小了~
有點不太方便閱讀~
於是我做了個小實驗要把這2個12弄清楚~

Default = 未套用任何CSS
12pt = font-size:12pt
12px = font-size:12px


ie的截圖

firefox的截圖

chrome的截圖
由此可證,網頁預設字體大小為 12pt,
疑問來了,那為何要很多套件會使用12px呢?
主要原因是因為決大多數的套件都是以英文語系為主,
反而是12px較為美觀, 對此,我也做了下面的小小實驗,

ie的截圖

firefox的截圖

chrome的截圖
英文字體是不是12px反而好看多了呢~
對此我用多一點的文字來測試看看~
因此又做了一個小小的實驗~

中文12pt;

白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。

中文12px;

白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。白日依山盡,黃河入海流。欲窮千里目,更上一層樓。
———————————————————————————-

英文12pt;
My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good.

英文12px;
My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good.

小小的結論
終於弄懂 12pt & 12px 的差異~
12pt – 為網頁的預設字體大小。
用途:
12pt – 較方便閱讀。
12px – 較精緻美觀。
其實字體的大小並沒有一定的規範,只是一個使用者習慣,相信各家瀏器會把12pt當做預設字體大小,一定是此一大小最適合文字閱讀。

但在設計上主要就看客戶的需求、客戶屬性為何,挑選適當的字體大小為預設文字尺寸,滿足目標使用者的需求及網站的可用性;舉例而言:公家機關網站、無障礙網站,主要功能在於內容佈達型的網站,必需兼顧各種族群及閱覽的年齡層,易讀性可能會高過於美觀,因此我們就可以用12pt字體大小;而設計感強烈,講求風格特色的網站如空間設計、平面設計或主題餐廳,網站強調的可能是一種氛圍或形象,則美觀可能就會高過易讀性,這就可以用看起來比較精緻的12px字體大小。

以這兩種此寸為基準去推算,相信以後更能掌握網站字體的大小。

[……]

閱讀更多

php 設定常數 define為0 判斷居然=任何字串 ?????????????????????Wht

define(‘_test’,0);
echo (_test==’ABC’);
// 居然是1

困擾了我好久..
這不知道是Bug還是怎樣..
常數設為0居然等於任何字串..
知道原因的高手可否告訴小弟..

以下是我目前找出來的解法:

解法1:
define(‘_test’,”);
echo (_test==’ABC’);
// 把常數設為字串,這樣就不相等了

解法2:
define(‘_test’,0);
echo (_test===’ABC’);

[……]

閱讀更多

新增or修改網址url參數

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = “”;
    var tempArray = url.split(“?”);
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = “”;

    if (additionalURL)
    {
        var tmpAnchor = additionalURL.split(“#”);
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split(“&”);

        for (i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split(‘=’)[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = “&”;
            }
        }      
    }
    else
    {
        var tmpAnchor = baseURL.split(“#”);
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += “#” + TheAnchor;

    var rows_txt = temp + “” + param + “=” + paramVal;
    return baseURL + “?” + newAdditionalURL + rows_txt;
}
//var url = ‘http://aaa.bb.cc.tw/index.php#’;
//var test  = updateURLParameter(url, ‘aa’, ‘aaval’);
//var test2  = updateURLParameter(test, ‘bb’, ‘bbval’);
//var test3  = updateURLParameter(test2, ‘cc’, ‘ccval’);
//var test4  = updateURLParameter(test3, ‘bb’, ‘cheng_val’);
//alert(test4);[……]

閱讀更多

取網址url

location.href : http://functionlab.org:80/tools/tcpproxy.php?user=FUNction#showscript
location.protocol : http
location.hostname : functionlab.org
location.host : functionlab.org:80
location.port : 80
location.pathname : /tools/tcpproxy.php
location.search : ?user=FUNction
location.hash : #showscript[……]

閱讀更多

JQuery取表單

獲取一組radio被選中項的值:var item = $(‘input[name=items][checked]’).val();
獲取select被選中項的文本:var item = $(“select[@name=items] option[@selected]”).text();
獲取select被選中項的文本 :var item = $(“select[name=items] option[selected]”).text(); $(“select[name=items]”).find(“option:selected”).text();

select下拉清單的第二個元素為當前選中值:$(‘#select_id’)[0].selectedIndex = 1;

select下拉清單value = ‘val’的元素為當前選中項:$(“select[name=items] option[value=’val’]”).attr(“selected”,”selected”);
radio單選組的第二個元素為當前選中項 :$(‘input[@name=items]’).get(1).checked = true; $(‘input[name=items]’).attr(“checked”, ‘1);

radiovalue = ‘val’的元素為當前選中項:$(‘input[name=items] [value=’val’]’).attr(“checked”,”checked”);

獲取值:

文字方塊,文本區域:$(“#txt”).attr(“value”);

多選框checkbox:$(“input[name=’checkbox’:checked]”).each(function(){

var val = $(this).val();

});

單選組radio: $(“input[type=radio][checked]”).val();

下拉清單selectvalue: $(‘select’).val();

下拉清單select選中的text :$(“select”).find(“option:selected”).text();

控制表單元素:

文字方塊,文本區域:$(“#txt”).attr(“value”,”); //清空內容

                       $(“#txt”).attr(“value”,’11); //填充內容

多選框checkbox:
checkbox的第二個元素被打勾:$(“input[name=items]”).get(1).checked = true; //打勾
                                           $(“input[name=items]”).get(1).checked = false; //
不打勾

checkboxvalue=’val’的元素前打勾:$(“input[name=item][value=’val’]”).attr(“checked”,true); $(“input[name=item][value=’val’]”).attr(“checked”,”checked”);

if($(“input[name=item][value=’val’]”).attr(‘checked’)==true) //判斷是否已經打勾

單選組radio: $(“input[type=radio]”).attr(“checked”,’2);//設置value=2的項目為當前選中項

下拉清單select: $(“#sel”).attr(“value”,’-sel3);//設置value=-sel3的項目為當前選中項

$(“<option value=’1>1111</option><option value=’2>2222</option>”).appendTo(“#sel”)//添加下拉清單的option

$(“#sel”).empty();//清空下拉清單

jQuery獲取Radio選擇的Value


代碼

$(“input[name=’radio_name’][checked]”).val(); //選擇被選中RadioValue
$(“#text_id”).focus(function(){//code…}); //
事件 當物件text_id獲取焦點時觸發
$(“#text_id”).blur(function(){//code…}); //
事件 當物件text_id失去焦點時觸發
$(“#text_id”).select(); //
使文字方塊的Vlaue值成選中狀態
$(“input[name=’radio_name’][value=’
要選中RadioValue‘”).
attr(“checked”,true); //
根據Value值設置Radio為選中狀態

jQuery獲取CheckBox選擇的Value

$(“input[name=’checkbox_name’][checked]”); //選擇被選中CheckBox元素的集合 如果你想得到Value值你需要遍歷這個集合
$($(“input[name=’checkbox_name’][checked]”)).
each(function(){arrChk+=this.value + ‘,’;});//
遍歷被選中CheckBox元素的集合 得到Value
$(“#checkbox_id”).attr(“checked”); //
獲取一個CheckBox的狀態(有沒有被選中,返回true/false)
$(“#checkbox_id”).attr(“checked”,true); //
設置一個CheckBox的狀態為選中(checked=true)
$(“#checkbox_id”).attr(“checked”,false); //
設置一個CheckBox的狀態為不選中(checked=false)
$(“input[name=’checkbox_name’]”).attr
(“checked”,$(“#checkbox_id”).attr(“checked”));//
根據3,4,5,你可以分析分析這句代碼的意思
$(“#text_id”).val().split(“,”); //
TextValue值以‘,’分隔 返回一個陣列

 jquery1.3.2

ISDARK : $(“input[@type=radio][name=ISDARK][checked]”).val()



$(“input[name=radioname][value=radio]”).attr(“checked”,”checked”);

[……]

閱讀更多