富文本編輯器tiny mce的事件處理
最近在做房產(chǎn)項目的時候,使用到了文本編輯器tiny mce,由于要做js的驗證,所以就開始研究tiny mce,在度娘和谷歌搜索了半天,發(fā)現(xiàn)關(guān)于tiny mce的事件處理特別少,官方文檔又是英文的api,所以我就把我的解決方法貼出來,供遇到相同問題的朋友參考,希望對你有所幫助。
提前說明一下,關(guān)于tiny mce編輯器的安裝,我就不做過多介紹了,網(wǎng)上還是有不少這方面的資料的。
下面我們進入正題。
富文本編輯器tiny mce的事件處理
首先,我們需要在初始化編輯器的時候,指定事件處理的回調(diào)函數(shù),代碼如下:
- tinyMCE.init({
- mode : "exact",
- theme : "mytheme",
- language : "se",
- elements : "elm1,elm2",
- handle_event_callback : 'eventHandle',
- });
其中,handle_event_callback指定了事件處理的回調(diào)函數(shù)。被調(diào)用的函數(shù)eventHandle有一個參數(shù),就是響應(yīng)的事件。下面我們來看一下我在項目寫的eventHandle函數(shù)。
- function eventHandle(event)
- {
- if(event.type == 'click' || event.type == 'keyup'){
- var cur_html = tinyMCE.get('content').getContent();
- if(!cur_html){
- tiny_mce_check.ShowWrong('#content', "請輸入簡介", "plus_c");
- tiny_mce_check.isinfo = false;
- return false;
- }
- tiny_mce_check.isinfo = 1;
- tiny_mce_check.ShowWrong('#content', '', 'pw_success');
- }
- }
從上面的函數(shù)可以看出,參數(shù)event是一個事件對象,我們根據(jù)事件對象的類型,即event.type來判斷當前的事件。在這里click事件是當我們將鼠標焦點定位在編輯器中,keyup事件是鍵盤彈起。關(guān)于具體的event對象響應(yīng),你可以使用console.log(event)在火狐瀏覽器的控制臺中查看。
結(jié)合tiny mce做前端js驗證的關(guān)鍵就是編輯器內(nèi)置的事件對象,找到了問題關(guān)鍵所在,就可以輕松搞定js驗證的問題了!
原文鏈接:http://www.phpfuns.com/scripts/tinymce_javascript_validation.shtml