我試圖讓它如此，以便如果您單擊CKEditor的文本區域（您鍵入的內容），它會顯示警報，但我無法使其工作，而且我不確定爲什麼。單擊CKEditor內容以顯示警報

這裏的的jsfiddle：http://jsfiddle.net/C7N7r/44/

請幫幫忙！

HTML：

<form> 
    <textarea class="ckeditor" id="editor1">Some text.</textarea> 
</form>

JS：

CKEDITOR.replace("editor1", {}); 

$(document).on("click", ".cke_contents", function() { 
    alert("CLICKED"); 
});

來源

2014-01-30 Bagwell

問題

隨着delegated event handler您捕獲與cke_contents類，將在文件中曾經存在的任何元素的點擊事件。你做對了。

問題是從來沒有點擊過.cke_contents。它從不處理click事件。您可以從代碼中點擊它並彈出警報。

CKEDITOR.on('instanceReady', function(){$('.cke_contents').click()})

這是因爲iframe的填充.cke_contents整個區域。事件不會跨幀傳播，也不會爲幀而獨立生成。

如何解決呢

您可以設置iframe內部事件處理程序。您可以訪問其內容，因爲它不違反同源策略（文檔和框架都具有相同的document.domain）。

CKEDITOR.on('instanceReady', function() { 
    $('.cke_contents iframe').contents().click(function() { 
     alert('Clicked!'); 
    }); 
});

jQuery.contents()返回其內容的文檔iframe，如果它不違反同源策略。

問題在於，對於每個CKEditor實例觸發了instanceReady，並且上面的代碼向所有CKEditor添加了點擊處理程序，因此處理程序可能會被複制。

然而，這可以通過更多的本地分配處理程序來解決，只是目前成爲準備編輯：

CKEDITOR.on('instanceReady', function(evt) { 
    $(evt.editor.container.$).find('iframe').contents().click(function() { 
     alert('Clicked!'); 
    }); 
});

該工程確定，因爲你可以看到JsFiddle。

旁註

本來我沒有得到jQuery event delegation，並認爲你正試圖將元素之前.cke_contents添加事件處理程序存在（你的代碼早得多執行）。如果沒有事件委託，您需要使用CKEditor API，即instanceReady event of the editor，只有這樣才能確保您將事件處理程序添加到已存在的元素中。（$(document).ready(…);）仍然爲時過早，您可以通過console.log($('.cke_contents').toSource());看到。

順便說一句，你嘗試用CKEditor手動替換textarea只是拋出一個異常，因爲它已經被替換。嘗試將其包裝在try {…} catch (e) { console.log(e); }中以查看它。

來源

2014-01-31 01:40:35 Palec

順便說一句[自動替換'textarea']（http://nightly.ckeditor.com/14-01-31-07-05/ standard/samples/replacebyclass.html）是通過'class =「ckeditor」'實現的。 – Palec

我遇到了問題。如果我在CKEditor的主體（'.cke_editable'）中點擊，它不會發出點擊事件。 – Bagwell

@Bagwell在我的瀏覽器（Firefox 17.0.11）中運行良好。如果我點擊CKEditor編輯區域的任何地方，彈出警報。它沒有理由不彈出。這個事件並不是通過iframe傳播的，這就是爲什麼我使用handler來添加所有的東西。你使用哪個瀏覽器？ – Palec

是它不使用只是錯誤的類選擇？使用.ckeditor代替：

$(document).ready(function() { 
    $(document).on("click", ".ckeditor", function() { 
     alert("Clicked!"); 
    }); 
});

來源

2014-01-31 00:13:53

不，沒有工作。 – Bagwell

奧普斯，我真的不應該從我的手機瀏覽器做到這一點:-) –

您可以使用CKEditor的API做一個簡單的方法：

function clickListener(e) { 
    alert("clicked")  
} 

CKEDITOR.on('instanceReady', function(ev){ 
    ev.editor.editable().attachListener(ev.editor.document, "click", clickListener) 
})

演示在http://jsfiddle.net/up3HG/1/

來源

2014-01-31 09:33:21 AlfonsoML

你在JsFiddle的'ev.editor.document'中忘記了'.document'。但好的解決方案！ +1 – Palec

單擊CKEditor內容以顯示警報

回答

問題

如何解決呢

旁註

相關問題