但ie8似乎不支援,往路上找到個解決方法,成功解了這問題
[……]
[……]
<a href="javascript:parent.$.fancybox.close();">關閉</a> 或 <script> $('a').click(function(e){ parent.$.fancybox.close(); }) </script>
<a href="$.fancybox.close();">關閉</a> 或 <script> $('a').click(function(e){ $.fancybox.close(); }) </script>
[……]
因為網站需要~jQuery需要向下相容IE8~
卻發現在IE8中無法正常運作某些語法~
最後發現關鍵在下列紅色文字 type這屬性~
若type使用application/javascript IE8 運作就會不正常~
要使用type=”text/javascript”便可解決問題~
<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js”></script>
<!– IE8 可運作 –>
<script type=”text/javascript”>
$(document).ready(function(e) {
alert(‘test1’);
});
</script>
<!– IE8 不可運作 –>
<script type=”application/javascript”>
$(document).ready(function(e) {
alert(‘test2’);
});
</script>[……]
有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。
<!-- A標籤還是有動作 --> <a href="#" onclick="alert('hello')">沒有作用</a> <!-- A標籤不會有任何動作 --> <a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>
html:
<a href="#">沒有作用</a>
jQuery
/** * VECTOR COOL * https://vector.cool */ $(document).ready(function(e) { $('a').click(function(e){ e.preventDefault(); }); });
[……]
//過濾 <script 等可能引入惡意內容或惡意改變顯示布局的代碼,如果不需要插入flash等,還可以加入<object的過濾
function filter_danger_code($str)
{
$farr = array(
“/s /”, //過濾多余的空白
“/<(/?)(script|iframe|style|html|body|title|link|meta|object|?|%)([^>]*?)>/isU”, //過濾 <script 等可能引入惡意內容或惡意改變顯示布局的代碼,如果不需要插入flash等,還可以加入<object的過濾
“/(<[^>]*)on[a-zA-Z] s*=([^>]*>)/isU”, //過濾javascript的on事件
);
$tarr = array(
” “,
“<\1\2\3>”, //如果要直接清除不安全的標簽,這里可以留空
“\1\2”,
);
$str = preg_replace( $farr,$tarr,$str);
return $str;
}[……]
http://docs.ckeditor.com/#!/api/CKEDITOR_Adapters.jQuery
只支援4.2版
要引入 adapters/jquery.js
$(‘#editor_simple’).ckeditor()
$(‘#editor_simple’).ckeditor({
toolbar:’Basic’,
width:’100%’,
height:150
})[……]
但在 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 配置檔 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';
[……]
我們想要設定編輯器中的預設字型及字體大小,依官方文件要設定下列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,
若有高手有更好的解決方法,希望能跟大家分享~謝謝[……]
CKEditor是一個非常強大的HTML編輯器,舊稱FCKeditor,是一個專門使用在網頁上屬於開放原始碼的所見即所得文字編輯器套件,2003年就開始累積很多用戶了,至今已經十年的時間了,我想很多開發人員對CKEditor這名字應該不陌生,CKEditor 主要優點而且相容於絕大部分的網頁瀏覽器,該有的功能全都有,也提供非常多的配置及API可以符合各種不同的開發需求,而且最重要的是免費的^^,除此之外官網上也提供了非常多相關的使用範例,還有非常詳細的開發文件可讓開發者更了解使用方式,但此篇文章主要不是介紹CKEditor,而是介紹CKEditor的基本配置Config檔的設定。
CKEditor4的設定有些地方好像跟之前板本不太一樣,那本文介紹的CKEditor4的這個版本,所以測試環境請以CKEditor4為準,CKEditor4可至官網下載,也可由下方連結下載。
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
重要配置說明如下,主要分為工具列、基本設定、選單設定三大部份~
(註一)
解決方法詳見我的另一篇文章
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
[……]