FCKeditor键盘事件两种方法(自定义键盘事件,自带键盘事件)asp.net

 

上一篇文章中,我们提到过增加图片的右键删除功能以实现同时在服务器上删除图片,之所以定义了图片的右键菜单,是因为当时没有想到如何捕获FCKeditor的键盘事件等一系列问题,今天这个问题得到了解决。看一下代码。也许我在某些部分处理的不够好,但是思路基本是对的,也实现了功能,想做这样功能的可以参考。

首先fckeditor的键盘事件,有两种方式可以获得,一是自定义监听,二是fclkeditor自己有键盘监听事件。

 

一、自定义FCKeditor监听键盘事件

自定义有一个坏处就是,在每个有FCKeditor控件的页面,都要写一串监听代码,才能够监听当前页面fckeditor的键盘事件。

看一下实现过程吧(感谢原作者,这里我有少许修改)

在放置有fckeditor控件页面的源文件aspx里,将下面的代码加到<head></head>之间。

<scripttype="text/javascript">

functionFCKeditor_OnComplete( editorInstance ) {

    editorInstance.EditorDocument.body.attachEvent("onkeydown", editor_keydown);

}

functioneditor_keydown() {

    varoEditor = FCKeditorAPI.GetInstance('FCKeditor1');

    varkeycode = oEditor.EditorWindow.event.keyCode;

    if(keycode == 46) {

        alert(“OK!”);

    }

}

</script>

测试一下成功。(46delete键代码。)

这个是最简单的,当然我们监听事件,如delete事件,肯定不是简单的弹出OK吧,那么我们回到问题的最初码。

来实现删除服务器图片功能。

那么我们把alert这行代码换做下面的

oEditor.Commands.GetCommand('KeyDelPic').Execute();

即让他执行js文件的一个command事件,这个command事件怎么添加,完全和上一篇文章介绍的一样。点击这里查看。下面把我的代码贴出来

    varFCKKeyDelPicCommand =function() {

        this.Name ="KeyDelPic";

    }

    FCKKeyDelPicCommand.prototype =

    {

        Execute:function() {

varoImage = FCK.Selection.GetSelectedElement();

            If(FCK.Selection.GetType() == 'Control' && oImage.tagName == 'IMG') {

                varsUrl = oImage.getAttribute('_fcksavedurl');

                varxml =newActiveXObject("MSXML2.XMLHTTP");

 

                if(confirm('您确定要将图片从服务器删除吗?')) {

                    xml.open("post","FCKdel_file.aspx?filePath="+ sUrl +"&UD=1",false);

                    xml.send();

 

                    switch(xml.responseText.substring(0, 1)) {

                        case"1": alert("文件删除成功!");

                            break;

                        case"0": alert("文件删除失败!请检查文件是否存在!");

                            break;

                        case"2": alert("您不是系统管理员,无权进行操作!");

                            break;

                        default: alert("未知错误!");

                            break;

                    }

                }

            }

        }

    };

可以看到,这段代码跟前面文章中提到的右键删除图片的代码基本上一致,只是多了一行,少了一行。

多了蓝色这一行If(FCK.Selection.GetType() == 'Control' && oImage.tagName == 'IMG') 这是为什么呢?因为前面右键删除图片,是选中图片弹出右键菜单进行删除,已经确定是图片;而现在是delete时候就触发,那么我们就需要判断一下,当是图片的时候,才弹出删除图片提示。所以要多加这行代码。少了黄色这一行oImage.parentNode.removeChild(oImage);因为键盘delete不需要我们手动移除图片。测试一下成功了。

这里还有个小插曲,在前面javascript代码里的这句editorInstance.EditorDocument.body.attachEvent,其中body是我后加的,如果不加body,仅弹出简单的提示框是没有问题的;但是在判断是否为图片的时候,没办法正确判断,所以加了body,至于为什么,不是特别清楚。

到此自定义监听事件结束。

 

 

二、看一下fckeditor自带的监听事件,我们不需要在每个有控件的页面写了,直接写在fckeditor里就OK了。

打开文件editor\_source\classes\fckenterkey.js找到这个函数

FCKEnterKey.prototype.DoDelete = function() {

var oImage = FCK.Selection.GetSelectedElement();

    if (FCK.Selection.GetType() == 'Control' && oImage.tagName == 'IMG') {

        FCK.Commands.GetCommand('KeyDelPic').Execute();

    }

FCKUndo.SaveUndoStep();

其中紫色的代码,是我们要加进去的,执行了同样的command代码。就是在判断是否为图片上有些重复判断了,需要优化一些。

至此两种方法全部完毕。我不是.net高手,只是一个小程序员,希望这些总结能给那些暂时迷茫的同行们一些帮助。

参考文章:http://www.code-design.cn/article/20090701/382.aspx

 

你可能感兴趣的:(fckeditor)