CKEditor4 自動清除內容標籤問題的解決方法

CKEditor4 自動清除內容標籤

在CKEditor中我們經由配置檔Config.js,可以依照自己的需求去自定編輯器的工具
如下圖的每一個小方塊,可依需求增加減少:

但在 CKEditor 中 CKEDITOR.editor.filter 會過濾掉一些沒開放功能的內容或程式碼

舉例來說:

上面這編輯器並沒有開放 iframe 這功能,但倘若我想要貼上 youtube 分享的嵌入HTML碼,而 youtube 的 HTML 就是由 <iframe> 方式嵌入的,youtube嵌入的Code如下:

<iframe width="560" height="315" src="//www.youtube.com/embed/9ATcxIOeDiY" frameborder="0" allowfullscreen></iframe>

我們開啟原始碼的編輯模式,貼上這一段code,做嵌入影片的動作後,在切換回所見即所得編輯方式的同時CKEDITOR.editor.filter就會過濾掉一些沒開放功能的內容,如上圖沒開放的iframe工具,如此我們因為沒有開放iframe工具就沒有辦法貼入youtube的iframe嵌入碼,其實這很合理,某些時候是一種很棒的限制內容功能,不過有些時候這或許並不是我們想要的,我們可能希望可以在不提供iframe的工具下,僅能用原始碼貼上的方式貼入 youtube 的 iframe。

解決這問題 CKEditor 也提供了2個解決方法:

在 CKEditor 配置檔 Config.js 設定

方法一:

config.allowedContent=true;

把allowedContent設定為true就是吧CKEDITOR.editor.filter這功能關閉,不去過濾任何內容,這方式不只針對 iframe,而是所有不開放功能都不會再被過濾了,雖然很方便,但少了一層的限制或許會擔心安全性的問題,所以我們還有第二種方法可選擇。

方法二:

CKEDITOR.editor.filter仍然運作,但允許開放部份不支援功能

config.allowedContent=false;
config.extraAllowedContent='iframe';

便只允許iframe的操作,若允許的工具有多項就用空格分隔,如下

config.extraAllowedContent='b i iframe';

[……]

閱讀更多

CKEditor4 預設字體大小 fontSize_defaultLabel、預設字型 font_defaultLabel 無法運作的解決方案

我們想要設定編輯器中的預設字型及字體大小,依官方文件要設定下列2個屬性
config.font_defaultLabel = ‘Arial’;
config.fontSize_defaultLabel = ’12px’;
可是不知道是Bug還是怎樣,我試過是沒有效果的,
只是會自動選取對應的字型及字體大小的選單選項,
這並不是我們要的,
搞了我好久終於找到解決方案,如下:

1.依然要設定此2屬性:
config.font_defaultLabel = ‘Arial’;
config.fontSize_defaultLabel = ’12px’;

2.修改 contents.css

.cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
改為
.cke_editable
{
font-size: 12pt;
font-family:Arial;
line-height: 1.6em;
}
存檔 > 清除暫存 > OK
預設字型跟字體大小就改變了,
目前我找到的解決方法就是直接去改它的預設CSS,
若有高手有更好的解決方法,希望能跟大家分享~謝謝[……]

閱讀更多

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

[……]

閱讀更多

新增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”);

[……]

閱讀更多