ckeditor注册ctrl+enter快捷键

2013-04-02更新:不要使用ckeditor的setData方法清空编辑器中的内容,此方法会重构iframe的document对象导致之前注册的ctrl+enter事件丢失,直接操作DOM对象清空body的内容即可。一定要调用setData方法,需要重新给新document对象添加事件,由于是异步的,所以需要传递回调函数,具体看最后的示例。

  由于ckeditor的编辑窗体是iframe,和父窗体是相互独立的作用域,在iframe中不会响应父窗体注册的任何事件,所以需要单独给ckeditor的iframe编辑器窗体注册事件。
 

  给可编辑的iframe注册事件不能使用document.onxxxx,需要使用接口addEventListener或者attachEvent(IE浏览器),具体参考:当iframe的designMode="On"时,在ff,如何下对iframe添加事件


  由于ckeditor的iframe有个初始化的过程,所以需要初始化完毕后再添加事件,ckeditor事件可以参考这篇文章:如何判断ckeditor是否已经加载和初始化完毕

 

  下面为给ckeditor注册ctrl+enter快捷键源代码

<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CKEditor Sample</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body><form method="post" action="data.asp">
	<textarea cols="80" id="editor_v2" name="editor_v2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
    window.onload = function () {
        CKEDITOR.replace('editor_v2', { skin: 'v2' });

        function keydown(e) {
            //if(e.keyCode==13&&e.ctrlKey)alert('按下了ctrl+Enter');//IE先判断keyCode有些时候会没反应,奇怪~~
            if (e.ctrlKey && e.keyCode == 13) {//改为先判断ctrlKey
                alert('按下了ctrl+Enter');
                //CKEDITOR.instances['editor_v2'].setData("");//调用setData方法会重构document导致之前添加的事件失败
                //CKEDITOR.instances['editor_v2'].document.$.body.innerHTML = ''; //直接操作dom清空内容不会重构document,事件依旧生效

                //一定要调用setData方法,需要重新给新document对象添加事件,由于是异步的,所以需要传递回调函数
                CKEDITOR.instances['editor_v2'].setData("", function () {
                    register_ctrl_enter_event(this.document.$);
                });

            }
        }
        function register_ctrl_enter_event(doc) {
            if (doc.addEventListener) doc.addEventListener('keydown', keydown, false);
            else if (doc.attachEvent) doc.attachEvent('onkeyup', function (e) { keydown(e); });
        }
        CKEDITOR.on('instanceReady', function (e) {
            register_ctrl_enter_event(e.editor.document.$);
        })
    }
</script>
	</form>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:ckeditor注册ctrl+enter快捷键

评论(0)Web开发网
阅读(167)喜欢(0)JavaScript/Ajax开发技巧