jQuery & javascript 彙整 - 第 4 頁，總計 4 頁

JQuery fancybox iframe close parent reload 關閉自動刷新

[……]

href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件，不是真的要做為連結之用，但是a標籤又必需設定 href ，這時大部份人就會在href加#號，但其實加#號仍然是連結，等同換了另一頁，網址末端也會加上#號(如：http://www.aaa.com#)，這並不是最理想的狀況，我們不希望它做任何動作，以下寫法a標籤緊會執行javascript的事件，除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html：

<a href="#">沒有作用</a>

jQuery

/**
* VECTOR COOL
* https://vector.cool
*/
$(document).ready(function(e) {
    $('a').click(function(e){
	e.preventDefault();
    });
});

[……]

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 重要配置設定 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

[……]