富文本编辑器tinymce的事件处理

最近在做房产项目的时候，使用到了文本编辑器tiny mce，由于要做js的验证，所以就开始研究tiny mce，在度娘和谷歌搜索了半天，发现关于tiny mce的事件处理特别少，官方文档又是英文的api，所以我就把我的解决方法贴出来，供遇到相同问题的朋友参考，希望对你有所帮助。

提前说明一下，关于tiny mce编辑器的安装，我就不做过多介绍了，网上还是有不少这方面的资料的。

下面我们进入正题。

富文本编辑器tiny mce的事件处理

首先，我们需要在初始化编辑器的时候，指定事件处理的回调函数，代码如下：

 
 
 

  
  
  
tinyMCE.init({  
  
  
  
    mode : "exact",  
  
  
  
    theme : "mytheme",  
  
  
  
    language : "se",  
  
  
  
    elements : "elm1,elm2",  
  
  
  
    handle_event_callback : 'eventHandle',  
  
  
  
}); 
 
 
 

其中，handle_event_callback指定了事件处理的回调函数。被调用的函数eventHandle有一个参数，就是响应的事件。下面我们来看一下我在项目写的eventHandle函数。

 
 
 

  
  
  
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');  
  
  
  
    }  
  
  
  
} 
 
 
 

从上面的函数可以看出，参数event是一个事件对象，我们根据事件对象的类型，即event.type来判断当前的事件。在这里click事件是当我们将鼠标焦点定位在编辑器中，keyup事件是键盘弹起。关于具体的event对象响应，你可以使用console.log(event)在火狐浏览器的控制台中查看。

结合tiny mce做前端js验证的关键就是编辑器内置的事件对象，找到了问题关键所在，就可以轻松搞定js验证的问题了！

原文链接：http://www.phpfuns.com/scripts/tinymce_javascript_validation.shtml

分享文章：富文本编辑器tinymce的事件处理
地址分享：http://www.mswzjz.cn/qtweb/news5/339455.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能